Context API

Context API는 리액트 프로제그에서 전역적으로 사용할 데이터가 있을 때 유용한 기능이다. 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등 여러가지 종류가 있을 수 있다. Context API는 리액트 v16.3부터 사용하기 쉽게 개선되었다.

Context API를 사용한 전역 상태 관리 흐름

리액트 애플리케이션은 컴포넌트 간의 데이터를 props로 전달하기 때문에 컴포넌트 여기저기서 필요한 데이터가 있을 때 주로 최상위 컴포넌트인 App의 state에 넣어서 관리한다.

하위 컴포넌트가 많아지면 각 하위 컴포넌트에 상태 업데이트 함수를 여러번에 걸쳐서 전달 해야한다.

이러한 상황은 프로젝트의 유지 보수성이 낮아질 수 있다.

그렇게 때문에 리덕스나 MobX 같은 상태 관리 라이브러리를 사용하여 전역 상태 관리 작업을 더 편하게 처리하기도 하는데 Context API가 많이 개선되어 전역 상태를 쉽게 관리할 수 있다.

Context 만들기

새 Context를 만들 때는 createContext 함수를 사용한다. 파리미터에는 해당 Context의 기본 상태를 지정한다.

import { createContext } from "react";

const ColorContext = createContext({ color: "black" });

export default ColorContext;

Consumer 사용

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

const ColorBox = () => {
  return (
    <ColorContext.Consumer>
      {(value) => (
        <div
          style={{
            width: "64px",
            height: "64px",
            background: value.color,
          }}
        />
      )}
    </ColorContext.Consumer>
  );
};

export default ColorBox;

Provider

Provider를 사용하면 Context의 value를 변경할 수 있다.

import ColorBox from "./components/ColorBox";
import ColorContext from "./contexts/color";

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

export default App;

createContext 함수를 사용할 때는 파리미터로 Context의 기본값을 넣어주었다. 이 기본값은 Provider를 사용하지 않았을 때만 사용된다. 만약 Provider를 사용했는데 value를 명시하지 않았다면, 이 기본값을 사용하지 않기 때문에 오류가 발생한다.

동적 Context

import React from "react";
import { ColorConsumer } from "../contexts/color";

const colors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];

const SelectColors = () => {
  return (
    <div>
      <h2>색상을 선택하세요</h2>
      <ColorConsumer>
        {({ actions }) => (
          <div style={{ display: "flex" }}>
            {colors.map((color) => (
              <div
                key={color}
                style={{
                  background: color,
                  width: "24px",
                  height: "24px",
                  cursor: "pointer",
                }}
                onClick={() => actions.setColor(color)}
                onContextMenu={(e) => {
                  e.preventDefault();
                  actions.setSubcolor(color);
                }}
              />
            ))}
          </div>
        )}
      </ColorConsumer>
      <hr />
    </div>
  );
};

export default SelectColors;

Consumer 대신 Hook 또는 static contextType 사용

리액트에 내장되어 있는 Hooks 중에서 useContext라는 Hook을 사용하면, 함수 컴포넌트에서 Context를 아주 편하게 사용할 수 있다.

import React, { useContext } from "react";
import ColorContext from "../contexts/color";

const ColorBox = () => {
  const { state } = useContext(ColorContext);
  return (
    <>
      <div
        style={{
          width: "64px",
          height: "64px",
          background: state.color,
        }}
      />
      <div
        style={{
          width: "32px",
          height: "32px",
          background: state.subcolor,
        }}
      />
    </>
  );
};

export default ColorBox;