React 상태관리 도구 비교 (Context vs Redux)

⚖️ Context API vs Redux

React에서 상태를 여러 컴포넌트에 걸쳐 공유해야 할 때 Context API 또는 Redux를 사용할 수 있습니다. 둘 다 전역 상태 관리를 위한 도구지만, 목적과 사용 방식에는 큰 차이가 있습니다.

1. Context API란?

Context는 React에서 기본 제공하는 기능으로, 컴포넌트 트리 전역에 데이터를 전달할 수 있습니다. 예: 로그인 사용자 정보, 테마 설정 등 비교적 단순한 전역 데이터 공유에 적합합니다.

2. Redux란?

Redux는 별도 설치가 필요한 상태 관리 라이브러리입니다. 중대형 프로젝트에서 상태를 예측 가능하고 구조적으로 관리하기 위해 사용됩니다. 액션 → 리듀서 → 스토어 방식의 흐름을 가집니다.

3. 비교표

항목	Context API	Redux
설치 필요 여부	X (React 기본)	O (redux, react-redux 등)
학습 난이도	낮음	높음
적합한 규모	작고 단순한 앱	대형 애플리케이션
디버깅 툴	거의 없음	Redux DevTools
미들웨어 지원	직접 구현	redux-thunk, redux-saga 등

4. 간단한 코드 예제

🧩 Context API

// UserContext.js import React, { createContext, useState } from 'react'; export const UserContext = createContext(); export function UserProvider({ children }) { const [user, setUser] = useState("guest"); return ( <UserContext.Provider value={{ user, setUser }}> {children} </UserContext.Provider> ); }

🧩 Redux 예시

// store.js import { createStore } from 'redux'; const initialState = { count: 0 }; function counter(state = initialState, action) { switch (action.type) { case "INCREMENT": return { count: state.count + 1 }; default: return state; } } export const store = createStore(counter);

5. 결론 및 선택 기준

• Context: 앱 규모가 작고 공유 상태가 단순할 때 간편하게 사용
• Redux: 상태가 복잡하고 예측 가능한 흐름이 필요한 대형 프로젝트에 적합

👉 선택은 프로젝트의 복잡도와 팀의 협업 스타일에 따라 달라져야 합니다.