React 상태 관리 ✅ Context API, Redux, Zustand 언제 써야 할까?

 

 

React의 상태 관리는 프로젝트 규모와 요구사항에 따라 달라집니다.
단순히 useState로 충분한 경우도 있지만, 전역 상태 관리가 필요해지면 선택지가 다양해집니다.

이번 포스팅에서는 대표적인 세 가지 접근법을 살펴봅니다.

---

🧩 1. Context API

React 기본 제공 전역 상태 관리 도구

✅ 특징

• React에 내장 → 별도 라이브러리 설치 불필요
• createContext + useContext 사용
• 전역 상태를 Provider로 감싸서 하위 컴포넌트에서 접근 가능

📌 예시

 

const ThemeContext = React.createContext();

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = React.useContext(ThemeContext);
  return <div>현재 테마: {theme}</div>;
}

⚠️ 단점

• 상태가 커질수록 리렌더링 최적화 어려움
• 복잡한 상태 관리에는 부적합

---

🏛️ 2. Redux

상태 관리의 표준처럼 자리잡은 라이브러리

✅ 특징

• 단일 스토어(Store)에서 상태를 관리
• 예측 가능한 상태 전이 (Reducer, Action 기반)
• 미들웨어(Redux Thunk, Saga)로 비동기 처리 확장 가능

📌 예시

 

// reducer.js
function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case "INCREMENT": return { count: state.count + 1 };
    default: return state;
  }
}

 

// 사용
const count = useSelector(state => state.count);
const dispatch = useDispatch();
dispatch({ type: "INCREMENT" });

⚠️ 단점

• 보일러플레이트 코드 많음 (Redux Toolkit으로 개선됨)
• 작은 프로젝트엔 과할 수 있음

---

🪴 3. Zustand

최근 각광받는 가볍고 직관적인 상태 관리 라이브러리

✅ 특징

• Redux보다 훨씬 간결
• 불필요한 리렌더링 최소화
• 미들웨어 확장 가능 (persist, devtools 등)

📌 예시

 

import create from "zustand";

const useStore = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 }))
}));

// 사용
function Counter() {
  const { count, increment } = useStore();
  return <button onClick={increment}>Count: {count}</button>;
}

⚠️ 단점

• Redux만큼의 생태계/레퍼런스는 부족
• 대규모 팀에서는 표준성이 약할 수 있음

---

⚖️ 4. 비교표

구분	Context  API	Redux	Zustand
설치 필요	❌	✅	✅
복잡성	낮음	높음	중간
리렌더링 최적화	어려움	가능	매우 효율적
학습 난이도	쉬움	중간~어려움	쉬움
적합 프로젝트	소규모	대규모, 팀 협업	중~대규모, 빠른 개발

---

🎯 5. 실무 적용 가이드

• 🟢 소규모 / 간단한 전역 상태 → Context API
• 🔵 대규모 / 팀 협업 / 복잡한 비동기 로직 → Redux (Toolkit 권장)
• 🟢 빠른 개발 / 중규모 / 직관적 상태 관리 → Zustand

👉 최근 트렌드는 Redux Toolkit + Zustand 혼합 사용도 많습니다.

---

📝 마무리 정리

• Context API: 간단하고 내장 기능, 하지만 성능 최적화 한계
• Redux: 대규모 프로젝트의 안정적인 선택, 다만 코드 복잡
• Zustand: 가볍고 직관적, 요즘 각광받는 차세대 선택지

상태 관리 = 팀 구성 + 프로젝트 규모 + 요구사항에 따라 고르는 것이 핵심입니다.