Context API 생성
전역 데이터를 Context에 담아서 사용하기 위해서는 먼저 Context를 생성해야 합니다.
Context는 리액트 패키지에서 createContext라는 함수를 불러와서 만들 수 있습니다.
import { createContext } from 'react';
...
const MyContext = React.**createContext**(defaultValue);생성된 Context 객체는 React가 관찰하는 구성 요소를 렌더링 할 때 트리에서 그 위에 가장 근접하게 일치하는 Provider에서 현재 컨텍스트 값을 읽습니다.
defaultValue 인수는 트리에서 구성 요소 위에 일치하는 공급자(Provider)가 없는 경우에만 사용됩니다.
Context. Provider
<MyContext.Provider value="Hello World">Context 객체 안에는 Provider React 구성 요소가 함께 제공됩니다. Provider는 Consumer Component가 컨텍스트 변경 사항을 구독할 수 있도록 하는 역할을 합니다.
그리고 Provider 컴포넌트 간에 공유하고자 하는 값을 value라는 Props 로 설정하면 자식 컴포넌트에서 해당 값에 바로 접근을 할 수 있습니다.
funtion APP() {
return (
</MyContext.Provider value="Hello World">
<AComponent />
<BComponent />
<CComponent />
</MyContext.Provider>
)
};위 코드에 작성된 A, B, C Component는 모두 Context와 연결되어있습니다. 그렇기 때문에 Context value에 변경 사항이 생기면 컴포넌트를 다시 렌더링 합니다. 변경 사항은 Object.is와 동일한 알고리즘을 사용하여 새 값과 이전 값을 비교하여 결정됩니다.
Object.is()는 두 값이 같은 값인지 비교하는 정적 메소드입니다.
| === 일치연산자(Strict Equality Comparison) | Object.is() |
|---|---|
| x === y; // return true or false; | Object.is(x, y); // return true or false; |
| --- | --- |
| 1. 두 값의 Type을 비교하여 다르면 false 2. x의 Type이 Number라면? → x나 y중 NaN이 존재하면 false → x와 y가 같은 값이면 true, 아닐경우 false → +0, -0은 같다고 판단 | 1. x와 y의 타입을 비교하여 다르면 false 2. Type이 Number라면(이어서) → 둘다 NaN인가? true → +0 과 -0 의 비교인가? false → 그 외의 같은 값인가? true → 그것도 아니라면? false |
Object.is()와 ===의 가장 큰 차이는 Object.is() 메서드를 이용하면 NaN 비교와 +0, -0 비교가 가능하다는 것입니다. 자세한 내용은 참고 자료 MDN : Object/is 를 참고하시기 바랍니다.
const MyContext = React. createContext({ userName: "OZ" });
‹MyContext. Provider value={{ userName: "Han" }}>만약 createContext를 사용 할 때 defaultValue 값을 {userName: "OZ" }이라고 했더라도 Context. 아래에 Provider value props에서 userName: "Han" }이라고 전달해주면 두 번째 value가 자식 컴포넌트, 혹은 Consumer Component 들에 전달됩니다. 즉, Provider 사용으로 Context의 value를 변경해줄 수 있습니다.
