React 전역 상태 관리 : Context API

📌 React의 상태 관리 방법

React에서 상태를 관리하는 방법은 내부 상태와 외부 상태 두 가지가 존재

• 내부 상태 관리: useState, Context API
• 외부 상태 관리: Redux, Redux Toolkit, Recoil 등

---

🎯 Context API

Context API는 컴포넌트 간에 전역 상태를 쉽게 공유할 수 있도록 도와주는 기능

🛠 Context API 사용법

1. createContext로 전역 상태 저장소 만들기
2. Provider로 전역 상태를 감싸기
3. useContext를 이용해 전역 상태 가져오기

---

0️⃣ ContextAPI로 만든 상태들을 담아놓을 폴더 생성하기

전역 상태를 관리하기 위해 별도의 context 폴더를 생성

src
 ├── context
 │    ├── counterContext.jsx
 ├── components
 ├── pages
 ├── App.jsx
 ├── main.jsx

1️⃣ createContext를 사용해 상태 저장소 생성

createContext를 사용하여 전역 상태 저장소를 생성

📁 context/counterContext.jsx

import { createContext, useContext, useState } from "react";

const CounterContext = createContext();

2️⃣ Provider 함수 컴포넌트 생성

Provider 역할을 하는 CounterProvider컴포넌트 생성

📁 context/counterContext.jsx

export function CounterProvider({ children }) {
  const [counter, setCounter] = useState(0);

  return (
    <CounterContext.Provider value={[counter, setCounter]}>
      {children}
    </CounterContext.Provider>
  );
}

children을 props로 받아야 CounterProvider 내부의 컴포넌트들이 Context를 사용할 수 있음

💡 Context API에서 Provider가 `children`을 받아야 하는 이유

Context API의 Provider는 children을 감싸고, 이를 Context 내부에서 접근할 수 있도록 함

📌 Provider의 역할

1. 하위 컴포넌트에 Context 값을 전달
2. 하위 컴포넌트를 감싸고 있어야 정상 동작

export function CounterProvider({ children }) {
  const [counter, setCounter] = useState(0);

  return (
    <CounterContext.Provider value={[counter, setCounter]}>
      {children}  // ✅ 반드시 children을 렌더링해야 함!
    </CounterContext.Provider>
  );
}

Provider를 main.jsx에서 App을 감싸도록 설정
📁 /main.jsx

import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';
import { CounterProvider } from './context/counterContext.jsx';

createRoot(document.getElementById('root')).render(
  <CounterProvider>
    <App />
  </CounterProvider>,
);

이제 CounterProvider 내부의 모든 컴포넌트가 전역 상태를 사용할 수 있는 상태

3️⃣ useContext로 전역 상태 사용하기

useContext를 사용해 전역 상태를 쉽게 불러올 수 있도록 useCounter라는 함수 생성

📁 context/counterContext.jsx

export function useCounter() {
  return useContext(CounterContext);
}

useCounter 활용하여 전역 상태 사용하기'
📁 ./App.jsx

import "./App.css";
import { useCounter } from "./context/counterContext";

function App() {
  const [counter, setCounter] = useCounter();

  return (
    <>
      <h1>Counter: {counter}</h1>
      <button onClick={() => setCounter((prev) => prev + 1)}>+</button>
      <button onClick={() => setCounter((prev) => prev - 1)}>-</button>
    </>
  );
}

export default App;

---

📌 Context API 활용하면 좋은 상황

• 전역적인 상태 관리가 필요한 경우
• Props Drilling(깊은 컴포넌트 구조에서 props를 계속 전달해야 하는 경우) 문제를 해결하고 싶을 때
• 상태를 여러 컴포넌트에서 공유해야 하는 경우
• 규모가 큰 프로젝트에서는 한계가 있을 수 있음

---