[React] Context + useReducer

🧠 React의 상태 관리를 Context + useReducer로 쉽게 해보자!

React를 사용하다 보면, 컴포넌트 간 상태 공유가 필요해지는 순간이 찾아옵니다. 이럴 때 흔히 props drilling 문제가 발생하죠. 상태를 자식의 자식까지 계속 넘겨줘야 하니까요.

그럴 때 사용할 수 있는 것이 바로 Context API입니다. 하지만 Context만으로 상태를 업데이트하려면 코드가 복잡하고 관리가 어려워지기도 해요. 이 문제를 해결하기 위해 useReducer를 함께 사용하면 아주 깔끔하게 해결할 수 있습니다.

---

📌 Context API + useReducer 조합이란?

Context API는 전역 상태를 만들고 앱 전체에 공유할 수 있게 해줍니다.
useReducer는 복잡한 상태 업데이트를 switch-case 로 명확하게 관리할 수 있도록 도와줍니다.

✅ Context API는 전역 상태 공간을 만드는 역할
✅ useReducer는 그 공간의 상태를 어떻게 바꿀지 정의하는 로직

---

📦 프로젝트 구조 예시

src/
├── context/
│   └── CounterContext.js
├── components/
│   └── Counter.js
├── App.js

---

🔧 Step 1: Context + Reducer 정의

// src/context/CounterContext.js
import React, { createContext, useReducer, useContext } from 'react';

const initialState = { count: 0 };

const counterReducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    case 'RESET':
      return { count: 0 };
    default:
      throw new Error(`Unhandled action type: ${action.type}`);
  }
};

const CounterContext = createContext();

export const CounterProvider = ({ children }) => {
  const [state, dispatch] = useReducer(counterReducer, initialState);

  return (
    
      {children}
    
  );
};

export const useCounter = () => {
  const context = useContext(CounterContext);
  if (!context) {
    throw new Error('useCounter must be used within a CounterProvider');
  }
  return context;
};

---

🧱 Step 2: Provider로 앱 감싸기

// App.js
import React from 'react';
import { CounterProvider } from './context/CounterContext';
import Counter from './components/Counter';

function App() {
  return (

Context + useReducer Example

    
  );
}

export default App;

---

🔄 Step 3: 상태를 사용하는 컴포넌트

// src/components/Counter.js
import React from 'react';
import { useCounter } from '../context/CounterContext';

const Counter = () => {
  const { state, dispatch } = useCounter();

  return (

Count: {state.count}

  );
};

export default Counter;

---

✅ 장점 요약

장점	설명
가볍고 빠름	별도 라이브러리 없이 React만으로 전역 상태 관리 가능
가독성	상태 로직이 reducer에 모여 있어 관리가 쉬움
모듈화 쉬움	Context 단위로 잘게 쪼개서 기능별 관리 가능
테스트 용이	reducer 함수는 순수 함수라 테스트가 간단함

---

⚠️ 주의할 점

• 모든 컴포넌트가 리렌더링 될 수 있음
  Context 값을 구독하는 컴포넌트는 Provider 값이 바뀌면 무조건 리렌더됩니다.
  해결 방법: Context를 쪼개거나 useMemo, useContextSelector 등을 사용하는 방법도 있어요.
• 비동기 로직은 따로 처리해야 함
  Redux처럼 미들웨어가 없기 때문에, 비동기 로직은 useEffect 또는 커스텀 훅으로 처리해야 합니다.

---

🧩 마무리

Context + useReducer는 React에서 전역 상태 관리를 위한 간결하면서도 강력한 조합입니다.
Redux를 도입하기엔 무거운 경우, 이 조합을 사용하면 훨씬 단순하고 직관적인 코드로 상태를 관리할 수 있어요.

👉 중소형 프로젝트, 간단한 상태 공유가 필요한 앱에서 아주 유용하게 쓸 수 있습니다.

앞으로 상태가 점점 복잡해지거나 비동기 처리 요구가 많아진다면, Redux와 같은 전문 상태 관리 툴로의 전환도 고려해보세요.
하지만 그 전까지는 Context + useReducer 조합이면 충분히 강력합니다 💪