context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다.
일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 (예를 들면 선호 로케일, UI 테마) 이 과정이 번거로울 수 있습니다. context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있습니다.
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>
Class.contextType
Class 의 contextType 에 Context 객체를 할당 할 수 있다.
this.context 로 해당 Context 의 Value를 참조할 수 있다.
class Some extends Component {
static contextType = MyContext;
render() {
const value = this.context;
return {}
}
}
Some.contextType = MyContext;
Hook의 useContext
Hook의 useContext로 Context 객체의 value를 가져올 수 있다.
