상태관리는 왜 필요한가?
리액트는 기본적으로 단방향 데이터 흐름을 가진다.
부모 → 자식으로 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+ 기반 신규 프로젝트 |
