Zustand vs Redux: 상태관리 라이브러리 비교

상태관리가 뭐냐?

"여러 컴포넌트에서 공유하는 데이터를 관리하는 것"

Header 컴포넌트 ─┐
                 ├─→ 사용자 정보 (로그인 상태)
Cart 컴포넌트 ───┤
                 │
Profile 컴포넌트─┘

---

1. Redux란?

"가장 유명한 상태관리 라이브러리 (2015년)"

기본 구조

// 1. Action 정의
const LOGIN = 'LOGIN';
const LOGOUT = 'LOGOUT';

// 2. Action Creator
const login = (user) => ({ type: LOGIN, payload: user });
const logout = () => ({ type: LOGOUT });

// 3. Reducer
const userReducer = (state = null, action) => {
  switch (action.type) {
    case LOGIN:
      return action.payload;
    case LOGOUT:
      return null;
    default:
      return state;
  }
};

// 4. Store 생성
const store = createStore(userReducer);

// 5. 사용
store.dispatch(login({ name: '아엔' }));

특징

• 보일러플레이트 많음 (작성할 코드 많음)
• Action, Reducer, Store 다 따로 만들어야 함
• 규칙이 엄격함

---

2. Zustand란?

"간단하고 가벼운 상태관리 라이브러리 (2019년)"

기본 구조

// 1. Store 생성 (끝!)
import { create } from 'zustand';

const useUserStore = create((set) => ({
  user: null,
  login: (user) => set({ user }),
  logout: () => set({ user: null }),
}));

// 2. 사용
function Header() {
  const { user, login, logout } = useUserStore();
  
  return (
    <div>
      {user ? (
        <button onClick={logout}>로그아웃</button>
      ) : (
        <button onClick={() => login({ name: '아엔' })}>로그인</button>
      )}
    </div>
  );
}

특징

• 코드 양 적음
• Hook처럼 사용
• 배우기 쉬움

---

3. 코드 비교

로그인 상태 관리 예시

Redux:

// actions.ts
export const LOGIN = 'LOGIN';
export const LOGOUT = 'LOGOUT';

export const login = (user) => ({
  type: LOGIN,
  payload: user,
});

export const logout = () => ({
  type: LOGOUT,
});

// reducer.ts
const initialState = {
  user: null,
};

export const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case LOGIN:
      return { ...state, user: action.payload };
    case LOGOUT:
      return { ...state, user: null };
    default:
      return state;
  }
};

// store.ts
import { createStore } from 'redux';
import { userReducer } from './reducer';

export const store = createStore(userReducer);

// 컴포넌트에서 사용
import { useDispatch, useSelector } from 'react-redux';

function Header() {
  const user = useSelector((state) => state.user);
  const dispatch = useDispatch();
  
  return (
    <button onClick={() => dispatch(login({ name: '아엔' }))}>
      로그인
    </button>
  );
}

Zustand:

// store.ts
import { create } from 'zustand';

export const useUserStore = create((set) => ({
  user: null,
  login: (user) => set({ user }),
  logout: () => set({ user: null }),
}));

// 컴포넌트에서 사용
import { useUserStore } from './store';

function Header() {
  const { user, login } = useUserStore();
  
  return (
    <button onClick={() => login({ name: '아엔' })}>
      로그인
    </button>
  );
}

코드 양 차이: Redux 약 50줄 vs Zustand 약 15줄

---

4. 장단점 비교

Redux

장점:

• ✅ 생태계 방대함 (라이브러리, 툴 많음)
• ✅ DevTools 강력함 (시간여행 디버깅)
• ✅ 미들웨어 시스템 (redux-thunk, redux-saga)
• ✅ 레퍼런스 많음 (문제 해결 쉬움)
• ✅ 대규모 프로젝트에서 검증됨

단점:

• ❌ 보일러플레이트 많음
• ❌ 러닝커브 높음
• ❌ 코드 복잡함
• ❌ 설정 번거로움
• ❌ TypeScript 타입 설정 복잡

Zustand

장점:

• ✅ 코드 간결함
• ✅ 배우기 쉬움
• ✅ 번들 크기 작음 (1KB)
• ✅ TypeScript 지원 좋음
• ✅ 설정 거의 없음
• ✅ Hook 방식이라 익숙함

단점:

• ❌ 생태계 작음
• ❌ 레퍼런스 상대적으로 적음
• ❌ DevTools 기능 제한적
• ❌ 미들웨어 시스템 약함
• ❌ 대규모 프로젝트 레퍼런스 적음

---

5. 실무에서 어떻게 쓰이냐?

Redux 사용 케이스

대기업/대규모 프로젝트:

네이버, 카카오, 토스 등
- 팀 규모: 10명 이상
- 프로젝트 규모: 대형
- 복잡한 비즈니스 로직
- 엄격한 상태 관리 필요

예시:

• 대시보드 (여러 차트, 필터 상태 관리)
• 어드민 시스템 (복잡한 권한 관리)
• 금융 앱 (거래 내역, 잔고 등)

Zustand 사용 케이스

스타트업/중소규모 프로젝트:

빠른 개발 속도 필요
- 팀 규모: 1~5명
- 프로젝트 규모: 중소형
- 간단한 상태 관리
- 빠른 프로토타이핑

예시:

• 쇼핑몰 (장바구니, 사용자 정보)
• 블로그 (다크모드, 사용자 설정)
• ToDo 앱 (할 일 목록)

---

6. 실무 사용 통계 (2024년 기준)

Redux

• 사용률: 약 40%
• 추세: 점점 감소 중
• 주로 레거시 프로젝트나 대기업

Zustand

• 사용률: 약 15% (빠르게 성장 중)
• 추세: 급격히 증가
• 새 프로젝트에서 선호

기타

• Context API: 25%
• Recoil: 10%
• Jotai: 5%
• 기타: 5%

---

7. 어떤 걸 선택해야 하냐?

Redux 선택해야 할 때

✅ 대규모 프로젝트
✅ 복잡한 상태 관리 필요
✅ 팀이 Redux 경험 많음
✅ 강력한 디버깅 도구 필요
✅ 시간여행 디버깅 필요

Zustand 선택해야 할 때

✅ 새 프로젝트 시작
✅ 간단한 상태 관리
✅ 빠른 개발 속도 필요
✅ 작은 팀
✅ 번들 크기 중요

---

8. 실무 트렌드

과거 (2015~2020)

"상태관리 = Redux"
모든 프로젝트에 Redux 사용

현재 (2021~2024)

"프로젝트 규모에 맞게 선택"
- 대규모: Redux
- 중소규모: Zustand, Recoil
- 간단함: Context API

미래 예측

Zustand 같은 경량 라이브러리 증가
Redux는 대기업/레거시 유지

---

9. 실제 회사 사용 예시

Redux 사용 회사

• 네이버 (복잡한 서비스)
• 카카오 (대규모 팀)
• 쿠팡 (많은 상태 관리)
• 당근마켓 (레거시 유지)

Zustand 사용 회사

• 토스 (일부 프로젝트)
• 스타트업들 (새 프로젝트)
• 프리랜서 프로젝트

---

10. 개인 프로젝트 추천

포트폴리오 만들 때

Zustand 추천!
- 코드 간결 → 면접관이 보기 좋음
- 빠르게 개발 가능
- 최신 트렌드

취업 준비할 때

Redux 공부는 필수!
- 면접에서 자주 물어봄
- 실무에서 만날 가능성 높음
- 하지만 새 프로젝트는 Zustand로

---

11. 학습 난이도

Redux

학습 시간: 2~3주
난이도: ★★★★☆

1주차: Action, Reducer 개념
2주차: Middleware, DevTools
3주차: TypeScript 적용

Zustand

학습 시간: 1~2일
난이도: ★★☆☆☆

1일차: 기본 사용법
2일차: TypeScript, 미들웨어

---

정리

Redux

• 언제: 대규모, 복잡한 프로젝트
• 장점: 강력함, 검증됨, 생태계
• 단점: 복잡함, 코드 많음
• 실무: 대기업, 레거시

Zustand

• 언제: 중소규모, 새 프로젝트
• 장점: 간단함, 빠름, 가벼움
• 단점: 생태계 작음
• 실무: 스타트업, 신규

추천

1. Zustand로 시작 (빠르게 익힘)
2. Redux 개념 공부 (면접 대비)
3. 프로젝트는 Zustand로 진행
4. Redux는 필요할 때 사용

"실무에서는 상황에 맞게 선택하는 게 중요함!"

---