[React] Context API 사용법 익히기

1. 새 Context 만들기

새 Context를 만들 때는 createContext 함수를 사용하며, 파라미터에는 해당 Context의 기본 상태를 지정함!

• contexts/color.js

import { createContext } from "react";

// == 새 Context를 만들 때 ==
// => createContext 함수를 사용함.
// => 파라미터에는 해당 Context의 기본 상태를 지정함.
const ColorContext = createContext({ color: "black" });

export default ColorContext;

2. Consumer 사용하기

- ColorContext 안에 들어 있는 색상 보여주기
이때 색상을 props로 받아오는 게 아니라 ColorContext 안에 들어있는 Consumer라는 컴포넌트를 통해 색상을 조회함!

• Function as a child / Render Props 패턴
  

• components/ColorBox.jsx

import React from "react";
import ColorContext from "../contexts/color";

const ColorBox = () => {
  return (
    <ColorContext.Consumer>
      {/* Consumer 사이에 중괄호 안에 함수를 넣어줌!
        컴포넌트의 value가 있어야 할 자리에 일반 JSX 혹은 문자열이 아닌 함수를 전달하는 것! */}
      {(value) => (
        <div
          style={{
            width: "64px",
            height: "64px",
            background: value.color,
          }}
        />
      )}
    </ColorContext.Consumer>
  );
};

export default ColorBox;
 

이제 컴포넌트를 App에서 렌더링해보자!

• App.jsx

import React from "react";
import "./App.css";
import ColorBox from "./components/ColorBox";

function App() {
  return (
    <div>
      <ColorBox />
    </div>
  );
}

export default App;

3. Provider 사용하기

여기서 이제 Provider를 사용하면 Context의 value를 변경할 수 있음!

• App.jsx 수정

import React from "react";
import "./App.css";
import ColorBox from "./components/ColorBox";
import ColorContext from "./contexts/color";

function App() {
  return (
    <ColorContext.Provider value={{ color: "red" }}>
      <div>
        <ColorBox />
      </div>
    </ColorContext.Provider>
  );
}

export default App;

그럼 이렇게 나오는 걸 볼 수 있다!

(+) Provider를 사용할 때는 value 값을 명시해 주어야 제대로 작동함!!!

기존에 createContext 함수를 사용할 때는 파라미터로 Context의 기본값을 넣어줌. 이 기본값은 Provider를 사용하지 않았을 때만 사용됨.

만약 Provider는 사용했는데 value를 명시하지 않았다면? 이 기본값을 사용하지 않기 때문에 아래와 같이 오류가 발생하게 된다.