Context API란

텍스트 리액트에서 데이터 흐름 컨트롤 하는 법 (State 관리하는 법)

• state와 props를 사용해서 컴포넌트 간에 전달
• React Context 사용
• mobx 사용 (외부 모듈 사용)
• redux 사용 (외부 모듈 사용)

리액트 Context 란?

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

React Context는 Component 트리의 깊이에 상관없이 props를 전달하지 않고도 Component에 데이터를 제공합니다.
Context는 전역 데이터를 관리하는 데 사용됩니다.

Context 생성

const MyContext - React.createContext(defaultValue);

Context 객체를 생성 -> React가 해당 Context 객체를 구독하는 구성 요소를 렌더링할 때 트리에서 그 위에 가장 근접하게 일치하는 Provider에서 현재 Context 값을 읽습니다.

Context.Provider

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

모든 Context 객체에서 Consumer Component가 컨텍스트 벼녁ㅇ 사항을 구독할 수 있도록 하는 Provider React 구성 요소가 함께 제공됩니다.

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

A, B, C Component 모두 Context를 구독 중일 경우 Context Value에 변경 사항이 생기면 Component를 다시 렌더링 합니다.

Object.is와 동일한 알고리즘을 사용하여 새 값과 이전 값을 비교하여 결정됩니다.

Class.contextType

class MyClass extends React.Component {
	componentDidMount() {
    	let value = this.context;
    }
    componentDidUpdate() {
    	let value = this.context;
    }
    componentWillUnmount() {
    	let value = this.context;
    }
    render() {
    	let value = this.context;
    }
}
MyClass.contextType = MyContext;

클래스의 contextType 속성에는 React.createContext()에 의해 생성된 Context 객체가 할당될 수 있습니다.
이 속성을 사용하면 this.context를 사용하여 해당 context 유형의 가장 가까운 현재 value를 사용할 수 있습니다.

object.is vs ===

타입을 구분하는 데 차이점이 있습니다.
+0 === -0 -> True
Object.is (+0, -0) -> False