[TIL] hook - useContext

부모컴포넌트 => 자식컴포넌트로 내려줄 때 너무 깊어지게 되면 prop drilling 현상이 일어난다. 

그러면 나중에는 어디에서 이 props가 전달되었는지 파악하기 어려워진다.

 

context API를 쓰면 

어떤 컴포넌트에 있더라도 전역적으로 사용할 수 있게된다.

 

• context API 개념

- createContext : context 생성

- Consumer : context 변화 감지

- Provider : context 하위 컴포넌트로  전달

 

// AllUseContext.js

import { createContext } from "react";

export const AllUseContext = createContext(null);

 

 

다른 컴포넌트들이 쓸 수 있게끔

가장 상위에서 제공하는 역할을 하는 컴포넌트에서 써야한다.

 

import { AllUseContext } from "../context/AllUseContext"

export default function GrandMother() {
	const familyName = "Kim";
    	const present = "Apple watch";
    return (
    <AllUseContext.Provider value={{
    	/* value 안에는 객체가 들어가고, key-value가 같으면 생략한다 */
        familyName,
        present,
    }}>
    	<Mother>
    </AllUseContext.Provide>
    );
}

 

이렇게 넣어주면 된다. 

여기서 props는 필요없다. 왜? 공통 컴포넌트 만든 것을 어느 컴포넌트에서든 접근할 수 있게끔 했기 때문에! 

그리고 .Provider 는 공급해주는자 라는 뜻으로 밑에있는 Mother 컴포넌트 밑으로 제공해준다라는 의미가 된다.

 

중간에 있던 컴포넌트 말고, context를 이용해서 값을 받아오는 Child 컴포넌트에서 useContext를 사용한다.

 

export default function Child() {
	const data = useContext(AllUseContext);
    
    return (
    	<div>
        	우리집 성은 <p>{data.failyName}</p> 이다.<br />
            할머니가 주신 크리스마스 선물은 <p>{data.present}</p>이다.
        </div>
    )
}

 

이렇게하면 data에는 Provider에서 값으로 잡아줬던 객체가 들어와있는걸 볼 수 있다.

 

 

하지만!

Provider에서 제공한 GrandMother value가 달라지게 되면 useContext를 사용하고 있는 모든 컴포넌트가 리렌더링 된다.

그래서 value 부분을 항상 신경써줘야 한다. => 이 부분의 대안으로 메모이제이션이 있다.