React Context API vs Redux: 언제, 무엇을 써야할까?

React 프로젝트를 진행하다 보면 “전역 상태 관리” 문제가 등장한다. 이때 자주 쓰이는 도구가 React Context API와 Redux이다. 이번 글에서는 두 가지를 비교하고, 사용 목적과 실무 적용 방법까지 구체적으로 다루어본다.

 

1. React Context API

Context API는 단순 전역 상태를 공유할 때 사용한다. 예를 들어 테마(theme), 로그인 정보, 언어 설정 등, 앱 전반에서 소규모 상태를 공유할 때 적합하다.

 

특징

• React 내장 기능이므로 별도 라이브러리 설치가 필요 없다.
• Provider + useContext 구조로 쉽게 구현 가능하다.
• 상태가 변경되면, 해당 Provider 하위의 모든 컴포넌트가 리렌더링될 수 있어 성능 최적화가 필요하다. (React.memo, useMemo 등 활용)

사용 시기

• 상태가 단순하고, 공유 범위가 한정적일 때
• 소규모 프로젝트나 특정 컴포넌트 계층에서 상태 공유가 필요할 때

예시 코드

const ThemeContext = React.createContext({ theme: "light", toggle: () => {} });

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = React.useState("light");
  const toggle = () => setTheme(prev => (prev === "light" ? "dark" : "light"));
  return (
    <ThemeContext.Provider value={{ theme, toggle }}>
      {children}
    </ThemeContext.Provider>
  );
}

// 사용 예시
const { theme, toggle } = React.useContext(ThemeContext);

 

2. Redux

Redux는 복잡한 상태를 중앙에서 예측 가능하게 관리하고, 여러 컴포넌트에서 공유할 때 사용한다. 예: API 데이터, 인증 상태, 장바구니, 모달 상태 등.

 

특징

• Store + Action + Reducer 구조로 중앙 집중식 상태 관리
• 미들웨어 활용 가능 (Redux Thunk, Saga) → 비동기 처리, 로깅, 상태 추적 가능
• DevTools 지원 → 상태 변화를 시각적으로 추적 가능

사용 시기

• 앱 규모가 중~대형이고 상태가 복잡할 때
• 상태 변경 로직을 명확히 분리하고 추적하고 싶을 때

예시 코드

const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment: state => { state.value += 1 },
    decrement: state => { state.value -= 1 }
  }
});

export const { increment, decrement } = counterSlice.actions;

export const store = configureStore({
  reducer: { counter: counterSlice.reducer }
});

// 사용 예시
const dispatch = useDispatch();
const count = useSelector((state: any) => state.counter.value);
dispatch(increment());

 

3. Context API vs Redux: 핵심 차이

항목	React Context API	Redux
규모/복잡도	소규모, 단순 상태	중~대규모, 복잡한 상태
구조	Provider + useContext	Store + Action + Reducer, 미들웨어 활용 가능
성능	상태 변경 시 하위 컴포넌트 전체 리렌더링 주의	selector, memoization 등으로 최적화 가능
장점	가볍고 단순, 설치 필요 없음	상태 추적, 테스트, 확장성 용이
단점	큰 앱에서는 성능 저하 가능	러닝 커브, 보일러플레이트 코드 존재

 

4. 실무 활용 팁

• Context + useReducer를 활용하면 Redux 없이도 간단한 중앙 집중식 패턴 구현 가능
• 작은 프로젝트나 특정 영역 상태 관리에는 Context API 추천
• 상태가 많고, 복잡하며, 여러 컴포넌트에서 공유된다면 Redux가 적합
• Redux DevTools를 활용하면 상태 변화를 추적하고 디버깅하기 쉬움

 

5. 결론

React 프로젝트에서 전역 상태 관리 도구를 선택할 때는 앱 규모, 상태 복잡도, 성능 고려가 핵심이다.

• 단순, 한정적 상태 → Context API
• 복잡, 공유 범위 넓은 상태 → Redux

실무에서는 이 두 가지를 조합하거나, Context + Redux-lite 패턴을 적용하기도 한다.