10. 전역(global) 데이터 공유

목차

1. context란?
2. context객체 생성
3. 클래스 컴포넌트에서의 Context 구독
4. 함수 컴포넌트에서의 Context 구독

 

---

 

1. Context란?

• React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법
• 즉, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 여러 컴포넌트에서 값 공유 가능
• Context가 쓰이는 상황 예시: 로그인한 유저 확인, 선호하는 언어 선택, 테마 선택 등

2. Context 객체 생성; React.createContext()메서드

Context 객체를 참조하고 있는 컴포넌트를 렌더링할 때

1. React는 트리의 상위에서 가장 가까이 있는 Provider로부터 현재값을 참조함
2. defaultValue 매개변수는 트리ㅍ 안에서 적절한 Provider 찾지 못한 경우 쓰이는 값

const MyContext = React.createContext(defaultValue);

 

 

 

3. 구독자들(클래스 컴포넌트)에게 Context의 변화 알리기; Context.Provider

• Provider는 Context 객체에 포함된 React 내장 컴포넌트
• Context를 구독하는 컴포넌트들에게 Context의 변화를 알리는 역할
• 하위 컴포넌트에게 value 속성을 props로 전달
• Provider 하위에 다른 Provider 배치하는 하는 것도 가능하며, 이 경우 하위의 Provider의 값이 우선시 됨
• Context 값의 변화 여부는 Object.is와 동일한 알고리즘을 사용하여 이전 값과 새로운 값을 비교하여 측정됨

 

 

4. 구독자들(함수 컴포넌트)에게 Context의 변화 알리기; Context.Consumer

• 함수 컴포넌트 안에서 context를 구독할 수 있게 하는 메서드
• Context.Consumer의 자식은 함수여야 함
• Context의 현재값을 받아서 React 노드를 반환