[학습] React Context API 간단 정리

React.createContext

Context 객체를 만들수 있다.

const MyContext = React.createContext(defaultValue);

Context.Provider

Provider 를 이용하여 Context 변경 사항을 자손들에게 제공 할 수 있다.

<MyContext.Provider value={/* some value */}></MyContext.Provider>

Provider 의 Value는 하위의 모든 Consumer 에서 사용할 수 있으며, Provider 하위의 모든 Consumer 는 Provider 의 value가 변경 될 때마다 재 렌더링 된다.

Context.Consumer

MyContext Provide의 Value의 변경 사항을 구독하며, Context 에서 가장 가까운 Provider 의 Value 를 참조한다.

<MyContext.Consumer>
{(value) => (/* render something based on the context value */)}
</MyContext.Consumer>