React에서 상태 관리 라이브러리 비교 – Redux, Recoil, Zustand

 

React 앱이 커지면 컴포넌트 간 상태 공유가 복잡해집니다. 이때 외부 상태 관리 라이브러리를 사용하면 상태 흐름을 더 명확히 하고 유지보수가 쉬워집니다. 오늘은 대표적인 상태 관리 도구 Redux, Recoil, Zustand를 비교해보겠습니다.

1. Redux – 전통적인 강자

Redux는 가장 널리 사용되는 상태 관리 도구입니다. Flux 패턴을 기반으로 상태를 중앙 집중식으로 관리합니다.

• 예측 가능한 상태 관리
• 미들웨어를 통한 로깅, 비동기 처리 등 확장성 우수
• 코드 양이 많고 학습 곡선이 있음

// Redux 예시
import { createSlice } from '@reduxjs/toolkit';

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 default counterSlice.reducer;

2. Recoil – Facebook의 공식 지원 실험

Recoil은 React의 선언적 방식에 잘 맞는 상태 관리 도구입니다. atom과 selector 개념을 도입하여 컴포넌트 중심의 상태 구성이 가능합니다.

• React와의 통합성이 매우 좋음
• 비동기 상태(selector)도 간단히 처리
• 아직 실험적 단계 (버전 안정성 고려)

// Recoil 예시
import { atom, useRecoilState } from 'recoil';

const countState = atom({
  key: 'countState',
  default: 0,
});

function Counter() {
  const [count, setCount] = useRecoilState(countState);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

3. Zustand – 작고 직관적인 상태 관리

Zustand는 사용법이 매우 간단하고, 최소한의 코드로도 전역 상태 관리를 할 수 있는 라이브러리입니다. React의 문법과 거의 섞이지 않아 자유롭게 사용 가능합니다.

• 초경량 (1KB 미만)
• 설정이 거의 필요 없음
• Vanilla JS 스타일, React 외부에서도 사용 가능

// Zustand 예시
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}</button>;
}

4. 어떤 걸 선택해야 할까?

라이브러리	장점	단점	추천 상황
Redux	확장성, 미들웨어, 생태계 풍부	러닝커브, 코드 복잡도	대규모 앱, 상태 흐름이 복잡한 경우
Recoil	React 친화적, 비동기 처리 편리	실험적, 커뮤니티 작음	React 중심의 프로젝트, 복잡한 컴포넌트 트리
Zustand	가볍고 직관적	기능이 단순함	작은 프로젝트, 빠른 개발

5. 마무리

상태 관리 도구는 프로젝트의 규모, 팀 구성, 기능 복잡도에 따라 달라집니다. 꼭 하나만 고집하기보다는, 적절한 도구를 선택하고 상황에 따라 바꾸는 유연한 접근이 중요합니다.