리액트 Context

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

 

 

React Context란?

Context는 모든 수준에서 수동으로 props를 전달하지 않고도 구성 요소 트리를 통해 데이터를 전달할 수 있는 방법을 제공

 

React Context는 컴포넌트 트리의 깊이에 관계없이 props를 전달하지 않고도 컴포넌트에 데이터를 제공

Context는 전역 데이터를 관리하는 데 사용 ex) 전역 상태, 테마, 서비스, 사용자 설정 등

 

 

Context API란?

전역 데이터를 Context에 담아서 사용하려면 먼저 Context를 생성해야 함

const MyContext = React.createContext(defaultValue);

Context 객체를 생성

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

defaultValue 인수는 트리에서 구성 요소 위에 일치하는 공급자가 없는 경우에만 사용

 

 

Context Provider

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

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

A,B,C 컴포넌트 모두 다 Context를 구독중

Context value에 변경이 생기면 컴포넌트를 다시 렌더링

변경사항은 Object.js와 동일한 알고리즘을 사용해 새 값과 이전 값을 비교해 결정

 

 

Class.contextType

클래스형 컴포넌트에서 콘텍스트를 사용하는 하나의 방법 중 하나로 contextType 사용

클래스의 contextType 속성에는 React.createContext()에 의해 생성된 Context 객체가 할당될 수 있음

이 속성을 사용하면 this.context를 사용해 해당 컨텍스트 유형의 가장 가까운 현재 value를 사용할 수 있음

렌더링 기능을 포함한 모든 수명 주기 메소드에서 이를 참조 가능

 

 

 

object.is  vs  ===

이 둘은 비슷하나 숫자 비교시에 다름

+0 === -0
// true


Object.is(+0, -0)
// false


4 === '4'
// false


Object.is(4, "4")
// false


4 == '4'
// true

cf) == vs ===

===는 타입까지 비교

 

 

useContext

함수형 Component에서 context value를 사용하려면 useContext 사용

const value = useContext(MyContext);

1. createContext API를 사용해 Context 생성

2. context value를 공유하기 원하는 Component를 Conext.Provider로 감싸주고 공유하기 원하는 value를 value props로 전달

3. 해당 컴포넌트에서 context value를 사용하기 위해 useContext Hook 이용

(만약 Provider로 감싸주지 않았다면 useContext로 리턴한 값에는 초기 Context 생성할 때 넣어준 값이 들어감