Context는 리액트의 컴포넌트들에게 전역적으로 데이터를 전달하고 사용할 수 있게 하는 방법이에요.
리액트에서는 다른 컴포넌트로 데이터를 전달할 일이 있으면 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 전달할 수 있어요.
props를 전달하는 과정이 한번이면 문제없지만 테마나 로그인 유저와 같이 여러 컴포넌트에 데이터를 반복해서 넘겨줘야 하거나, 3단계 이상 멀리있는 컴포넌트에 데이터를 넘겨줘야할 때면 데이터를 사용하지 않는 컴포넌트에도 props를 넘겨야해서 불편하다고 느껴져요.
이 때 Context 같은 전역 상태관리를 사용하면 이런 불편함을 해결할 수 있어요.
저는 주로 Recoil이라는 상태관리 라이브러리를 사용해서 이런 문제를 해결해왔어요.
Context는 리액트에서 기본으로 제공되는 방법인데 제가 기본을 모르고 별도의 라이브러리를 사용하고 있다는 생각이 들었고, Context에서는 어떤 식으로 상태관리를 할 수 있는지 알고싶어서 학습하게 되었어요.
const MyContext = React.createContext(defaultValue);
React.createContext 는 Context 객체를 만들어 반환해요.
Context 객체를 구독하고 있는 컴포넌트가 렌더링 될 때, 리액트는 가장 가까이에 있는 Provider에서 값을 읽어와요. (Provider는 바로 아래에서 설명해요.)
defaultValue는 트리 안에서 짝지어진 Provider가 존재하지 않으면 사용되는 값이에요.
Provider가 undefined를 보내도 Provider가 존재하는 것이므로 defaultValue 대신 Provider의 value가 사용되어요.
<MyContext.Provider value={/* some value */}>