김민태의 데브캠프 2기 - useContext Hook 사용해보자

 

useContext 

const MyContext = React.createContext(defaultValue);
const value = useContext(MyContext);

 

Context 객체(React.createContext에서 반환된 값)을 인수로 가지고 현재 Context Value를 반환한다.

이는, 현재 Context Value는 트리에서 호출 구성 요소 위에 가장 가까운 <MyContextProvider>의 value prop에 의해 결정된다

 

만약 Component 위의 가장 가까운 MyContext.provider가 업데이트되면 이 Hook은 해당 MyContext Provider에게 전달된 최신 Context value로 다시 렌더링을 트리거한다.

 

 

출처 - 김민태의 데브캠프 강의

 

1. createContext API를 이용해서 Context 생성

2. context value를 공유하기 원하는 Component를 Conext Provider로 감싸기, 또한 공유하기 원하는 value를 value props로 전달

3. 해당 컴포넌트에서 context value를 사용하기 위해서 useContext Hook을 이욯