Context API vs 상태관리 라이브러리

상태관리는 왜 필요한가?

리액트는 기본적으로 단방향 데이터 흐름을 가진다.

부모 → 자식으로 props로 전달하며 UI를 구성하는데, 앱이 커질수록 이 구조에서 문제가 발생한다.

 

여러 컴포넌트가 같은 데이터를 필요로 하거나, 중첩 전달이 반복되고 이벤트가 깊은 자식에서 발생해 상위 컴포넌트에 영향을 주는 등의 상황을 마주하게 되면 컴포넌트 간 데이터 공유를 쉽게 만드는 구조가 필요하다.

→ 상태 관리 라이브러리 도입의 필요성

 

Context API

리액트에서 기본으로 제공하는 전역 상태 컨텍스트로, props drilling(중첩 전달)을 줄이기 위해 설계되었다.

리액트 내장 기능으로 편하게 사용 가능(createContext, useContext)하며, Provider → Consumer 구조로 전역 데이터를 공유한다.

const ThemeContext = createContext();
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}
function Toolbar() {
  const theme = useContext(ThemeContext);
  return <Button theme={theme} />;
}

장점

• 외부 의존성 X
• 단순한 전역 상태에 적합하다. e.g. 테마, 언어 설정 등

단점

• 상태가 자주 바뀌면 Provider 전체가 리렌더링 된다.
• 규모가 커지면 성능 저하 및 관리 복잡도 증가.

 

Redux

상태의 중앙집중 관리 모델.

Redux는 모든 상태를 하나의 Store에 보관, state를 오직 action과 reducer를 통해서만 수정.

const initialState = { count: 0 };
function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

장점

• 명확한 상태 추적: action log, time travel debug 가능.
• 대규모 팀, 복잡한 상태 흐름에서 일관성 유지 용이.
• 미들웨어를 통한 확장성(redux-thunk, redux-saga 등).

단점

• 보일러플레이트 코드가 많음(action, reducer, dispatch 반복)
• 초기 진입장벽이 높고, 단순 앱에는 과한 구조.

→ 명확한 구조와 예측 가능성이 필요한 대규모 프로젝트에 적합함.

 

Zustand

Redux의 철학을 유지하며 코드 복잡도를 최소화한 라이브러리.

Hook 기반으로 Store하며 Context나 Provider 불필요,

React의 리렌더링 성능을 최적화했다.

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

장점

• 매우 간단한 API
• 부분 구독(selectors)으로 불필요한 리렌더링 방지
• Immer, persist(스토리지 저장) 등 기본 지원.

단점

• Redux처럼 상태 변경 추적(logging, time travel) 기능은 부족.
• 너무 자유도가 높음 → 일관된 패턴 유지 어려움

→ 단일 페이지나 컴포넌트 중심의 중간 규모 프로젝트에 이상적.

 

Recoil

React에 최적화된 의존성 기반 상태 관리.

Facebook이 React 전용으로 설계한 상태 그래프 기반 라이브러리로,

각 상태 단위를 atom으로 관리하며 selector를 통해 파생 상태(derived state)를 계산한다.

const countState = atom({ key: 'count', default: 0 });
const doubleCount = selector({
  key: 'doubleCount',
  get: ({ get }) => get(countState) * 2,
});

장점

• useState처럼 자연스러운 사용성
• atom 간 의존성 자동 관리 → 부분 리렌더링 최소화
• React Suspense, concurrent feature와 호환.

단점

• 조금 불안정한 상태.
• 디버깅/도구 지원이 Redux만큼 성숙하지 않음.

→ React 내부 동작과 밀접하게 통합, 차세대 React 환경과 잘 맞음

 

그래서 뭘 써야 할까?

구분	특징	적합한 경우
Context API	리액트 기본 내장, 단순한 전역 데이터 공유	다크 모드, 로케일, 간단한 설정 값
Redux	중앙집중 + 명확한 상태 흐름, 미들웨어 풍부	대규모 SPA, 협업이 많은 프로젝트
Zustand	Hook 기반, 코드 간결, 빠른 성능	스타트업, MVP, UI 상태 중심 앱
Recoil	atom/selector 기반, React 친화적	React 18+ 기반 신규 프로젝트