05. React Context

88. 리액트 Context란?

리액트에서 한 컴포넌트 안에서 데이터를 생성하고 업데이트하거나 다른 컴포넌트와 데이터를 공유해서 사용하는 방법은 여러가지가 있음

리액트에서 데이터 흐름을 컨트롤하는 방법 (state 관리하는 방법)

• state와 props를 사용해서 컴포넌트 간에 전달
• React Context 사용
• mobx 사용
• redux 사용
• ...

React Context

React Context는 컴포넌트 트리의 깊이에 관계없이 props를 전달하지 않고도 다른 컴포넌트에 데이터를 제공함. Context는 전역 데이터를 관리하는데 사용됨
ex) 전역 상태, 테마, 서비스, 사용자 설정 등

React Context를 사용하는 이유

상태를 내려줄 부모와 자식 컴포넌트 사이의 깊이가 1이라면 상관없지만 깊이가 깊으면 props를 이용해서 계속 내려줘야 하므로 번거로움

89. Context API 살펴보기

React.createContext

const MyContext = React.createContext(defaultValue);

Context 객체를 생성. React가 이 Context 객체를 구독하는 구성 요소를 렌더링 할 때 트리에서 그 위에 가장 근접하게 일치하는 Provider에서 현재 Context 값을 읽어옴

defaultValue 인수는 트리에서 구성 요소 위에 일치하는 공급자가 없는 경우에만 사용됨
Context를 사용하고자하는 컴포넌트들을 Provider로 감싸줌. 그러면 그 자식 컴포넌트들은 모두 Context를 사용할 수 있음

React.Provider

모든 Context 객체에는 Consumer Component가 Context 변경 사항을 구독할 수 있도록 하는 Provider React 구성 요소가 함께 제공됨

<MyContext.Provider value={/* some value */}>
  <AComponent />
  <BComponent />
  <CComponent />
</MyContext.Provider>

A, B, C Component가 모두 Context를 구독중
Context value에 변경 사항이 생기면 컴포넌트를 다시 렌더링 함

변경 사항은 Object.js와 동일한 알고리즘(sameValue)을 사용하여 새 값과 이전 값을 비교하여 결정됨

Class.contextType

클래스 컴포넌트에서는 contextType 속성에 React.createContext()에 의해 생성된 Context 객체를 할당하여 context를 사용할 수 있음

this.context를 사용하여 해다 context 유형의 가장 가까운 현재 value를 사용할 수 있음. 렌더링 기능을 포함한 모든 수명 추가 메서드에서 이를 참조할 수 있음

Object.is vs ===

Object.is 와 '===' 둘 다 타입을 구분해서 비교를 해줌. 하지만 '==='은 +0과 -0을 같다고 판단함

+0 === -0 // ---> true
Object.is(+0, -0) // ---> false