📘 리액트 강의 8편 - Context API로 전역 상태 공유하기

 

컴포넌트가 깊어지면 props 전달이 너무 복잡해질 수 있습니다.
이 문제를 해결하기 위해 React는 Context API라는 기능을 제공합니다.
이번 시간에는 Context를 이용해 전역 상태를 만들고, props drilling 없이 데이터 전달하는 방법을 배웁니다.

---

1. props drilling 문제란?

<App>
  <Header>
    <UserInfo>
      <ProfileName />
    </UserInfo>
  </Header>
</App>

• user라는 상태를 가장 하위의 ProfileName까지 전달하려면 매 단계마다 props로 넘겨야 함 → 불편함💦
• 이걸 해결하는 게 바로 Context API

---

2. Context API 기본 흐름

1. createContext()로 Context 생성
2. Provider로 상태를 공유할 범위 설정
3. useContext()로 값 받아오기

---

3. 예제: 다크모드 전역 상태 관리

---

📄 ThemeContext.js

import { createContext } from "react";

const ThemeContext = createContext();

export default ThemeContext;

---

📄 App.js

import { useState } from "react";
import ThemeContext from "./ThemeContext";
import Page from "./Page";

function App() {
  const [isDark, setIsDark] = useState(false);

  return (
    <ThemeContext.Provider value={{ isDark, setIsDark }}>
      <Page />
    </ThemeContext.Provider>
  );
}

export default App;

---

📄 Page.js

import { useContext } from "react";
import ThemeContext from "./ThemeContext";

function Page() {
  const { isDark, setIsDark } = useContext(ThemeContext);

  const pageStyle = {
    backgroundColor: isDark ? "#333" : "#fff",
    color: isDark ? "#fff" : "#000",
    padding: "20px",
    minHeight: "100vh",
  };

  return (
    <div style={pageStyle}>
      <h1>🌗 다크모드 예제</h1>
      <button onClick={() => setIsDark(!isDark)}>
        {isDark ? "라이트모드로 전환" : "다크모드로 전환"}
      </button>
    </div>
  );
}

export default Page;

---

4. 핵심 요약

기능 설명

createContext()	전역 상태를 위한 공간 생성
Provider	하위 트리에 상태를 공유해줌
useContext()	어디서든 context 값 접근 가능