[React] Todo-list : 컴포넌트 만들기 4

📌 Context

context는 React 컴포넌트 트리 안에서 전역적이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법
e.g. 현재 로그인한 유저, 테마, 선호하는 언어 등...

context를 사용하면 중간에 있는 엘리먼트들에게 props를 넘겨주지 않아도 된다!

React.createContext

Context를 만들 땐 React.createContext() 라는 함수를 사용한다.
createContext의 파라미터에는 Context의 기본값을 설정한다.
➡️ 여기서 설정하는 값은 Context를 쓸 때, 값을 따로 지정하지 않을 경우 사용될 기본 값!

const MyContext = React.createContext(defaultValue);

Context 객체에 포함된 Provider라는 컴포넌트로 Context의 값을 정할 수 있다.
이 컴포넌트를 사용할 때, value라는 값을 설정해주면 된다.

<UserDispatch.Provider value={dispatch}>...</UserDispatch.Provider>

이렇게 설정하고 나면, Provider에 의하여 감싸진 컴포넌트들에서 Context의 값을 바로 조회해서 사용할 수 있다.