일반적인 React app에서 데이터는 위에서 아래로(parents to children) props를 통해 전달되지만, app안의 여러 컴포넌트에 전해줘야 하는 props의 경우에는(ex. 로그인된 유저 정보, UI테마, 언어 등) 이 과정이 번거로울 수 있다.
context는 단계적으로 일일이 props를 넘겨주지 않고 컴포넌트 트리 전체에 데이터를 제공할 수 있게 해준다
context 사용 주의점: 컴포넌트를 재사용하기 어려워진다.
(때때로 컴포넌트 합성Composition VS Inheitance이 context보다 간단한 해결책일 수 있다.)
Context객체 만들기
const MyContext = React.createContext(defaultValue);
<MyContext.Provider value={}>Context 객체를 subscribe하고 있는 컴포넌트를 렌더링할 때 React는 트리 상위에서 가장 가까이 있는 Provider로부터 현재 값을 읽는다.
defaultValue: 트리 안에서 적절한 Provider를 찾지 못했을 때 쓰이는 값. 컴포넌트를 독립적으로 테스트할 때 유용하다. Provider를 통해 undefined값을 보내도 Context객체를 subscribe하고있는 컴포넌트들이 defaultValue를 읽지는 않는다.
Context객체에 포함된 React 컴포넌트인 Provider는 context를 subscribe하는 컴포넌트들에게 context의 변화를 알리는 역할을 한다.
Provider 컴포넌트는 "value" prop을 받아서 하위 컴포넌트들에게 전달한다. Provider 하위에 또 다른 Provider를 놓으면, 하위 Provider의 값이 우선시된다.
context를 subscribe하는 컴포넌트는 Provider의 "value" prop이 바뀔 때마다 rerendering 된다.
context 사용 주의사항:
- context값이 바뀌었는지 여부는 Object.is와 동일한 알고리즘을 사용해 이전 값과 새로운 값을 비교하기 때문에 객체 타입의 데이터를 value로 보내는 경우에는 문제(ex. Provider의 부모가 렌더링될 때마다 새로운 객체가 생성되어 불필요하게 하위 컴포넌트들이 렌더링 될 수 있다.)가 생길 수 있다.
- 예전 버전에서 실험 단계의 context API(Lagacy Context)가 쓰인 적이 있는데, React 16.x 버전 이후의 메이저 배포에서 삭제될 예정.
