context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법입니다.

예시

위 이미지처럼 컴포넌트 트리가 있다고 가정해본다.

만약 A-1에서 A-2로 상태값을 공유해야 한다면 A-1의 state를 A로 전달하고 A에서 A-2로 props를 전달해야 한다.

하지만 위 처럼 A-2-1-1-2에서 A-1로 상태값을 전달해야 한다면 자식에서 부모로 state를 차례차례 전달해야 하고 부모에서 자식으로 props를 전달해야 하는데 이는 비효율적이다.

그리고 이를 해결해 줄 수 있는것이 Context API다.

실습(다크모드 만들기)

codesandbox

import { createContext, useContext, useState } from "react";
import "./reset.css";
import "./DarkMode.css";

const DarkModeContext = createContext();

function DarkModeProvider({ children }) {
  const [darkMode, setDarkMode] = useState(false);
  const toggleDarkMode = () => setDarkMode((mode) => !mode);

  return (
    // key와 value가 같으면 축약해도 된다.
    <DarkModeContext.Provider value={{ darkMode, toggleDarkMode }}>
      {children}
    </DarkModeContext.Provider>
  );
}

export default function DarkMode() {
  return (
    <DarkModeProvider>
      <Container />
    </DarkModeProvider>
  );
}

function Container() {
  const { darkMode } = useContext(DarkModeContext);
  return (
    <div className={darkMode ? "container" : "container dark"}>
      <Header />
      <Contents />
    </div>
  );
}

function Header() {
  const { toggleDarkMode } = useContext(DarkModeContext);
  return (
    <header className="header">
      <ul>
        <li>
          <a href="#none">Menu1</a>
        </li>
        <li>
          <a href="#none">Menu2</a>
        </li>
        <li>
          <a href="#none">Menu3</a>
        </li>
        <li>
          <a href="#none">Menu4</a>
        </li>
      </ul>
      <div>
        <button onClick={toggleDarkMode}></button>
      </div>
    </header>
  );
}

function Contents() {
  return (
    <section className="contents">
      <p>Contents Area</p>
    </section>
  );
}

TIP

Context API에서 사용하는 데이터가 변경되면 이를 적용하고 있는 모든 컴포넌트의 상태가 변경 된다. 즉즉 공통 데이터를 변경할때 사용하는 것이 좋다. ex) 언어, 테마(다크모드), 로그인

또한 Context API는 컴포넌트 트리 중간부터 사용할 수 있으므로 상태를 어디서부터 어디까지 변경할건지를 잘 생각하는 것이 좋다.