Zustand vs Redux 직접 써보고 비용과 성능 차이까지 비교했어요

프론트엔드 프로젝트 하면서 상태관리 라이브러리 선택이 늘 고민이었는데요, 이번에 Zustand와 Redux를 직접 써보면서 비용과 성능까지 꼼꼼히 비교해봤어요. 이걸 구현하다가 생각보다 삽질도 많았고, 실제로 얼마 차이 나는지를 눈으로 확인하니 확실히 판단이 쉬워지더라고요.

이 글에서는 두 라이브러리의 설치 용량부터 코드 작성량, 그리고 성능과 유지보수 비용까지 모두 담아봤어요. 직접 써본 경험 바탕이라 좀 더 현실적이고 실질적인 비교가 될 거예요.

개발 환경 / 버전 정보

이번 비교는 React 18.2.0 기반 프로젝트에서 진행했고, 상태관리 라이브러리는 각각 Redux 4.2.1 (redux + react-redux + @reduxjs/toolkit) 와 Zustand 4.3.5를 사용했어요.

설치 용량과 초기 프로젝트 부담 차이

사실 이 부분이 의외로 잘 모르는 분이 많더라고요. 패키지 설치 시 실제로 추가되는 용량을 측정해봤는데, 복잡한 프로젝트에서 용량 차이가 어떻게 효율성에 영향을 줄 수 있는지 보시면 좋을 것 같아요.

라이브러리	추가 설치 용량 (npm 기준)	주요 의존성 개수
Redux + React-Redux + Toolkit	약 3.6 MB	20개 이상
Zustand 단일 패키지	약 0.1 MB	0 (자체 구현)

Redux는 의존성도 많고 용량도 확실히 무겁더라고요. Zustand는 압도적으로 가볍고 단일 패키지라 초기 프로젝트 세팅할 때 부담이 적었어요.

코드 작성량 차이, 실제 개발 비용으로 환산해보니

제가 비슷한 기능 상태 관리를 각각 구현하면서 실제 작성한 코드 라인 수를 직접 세어봤어요. 단순히 라인 수만 본 게 아니라, 구현에 걸린 시간과 느꼈던 복잡도도 반영해봤습니다.

항목	Redux	Zustand
순수 상태관리 코드 라인 수	약 120라인	약 40라인
상태 업데이트 함수 작성 시간	약 1시간	약 20분
테스트 코드 작성량	약 60라인	약 20라인

Redux가 상대적으로 더 많은 코드를 요구하기 때문에, 개발 시간과 유지보수 비용이 더 늘어난다고 볼 수 있죠. 특히 소규모 프로젝트나 빠른 프로토타이핑할 때는 이 차이가 크게 느껴졌어요.

핵심 구현 방법 (Zustand 예제)

사실 이 부분이 가장 체감이 많이 됐는데요, Zustand는 훨씬 직관적으로 쓸 수 있었어요. 아래는 간단한 카운터 상태 관리 구현입니다.

import create from 'zustand'

// Zustand store 생성
const useStore = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 }))
}))

// React 컴포넌트에서 사용
function Counter() {
  const { count, increment, decrement } = useStore()
  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  )
}

Redux로 구현할 때보다 훨씬 적은 코드로, 더 명확하게 핵심 로직이 드러나는 느낌이었어요. 초기 세팅부터 액션 타입, 리듀서 작성 없이 이렇게 가능하다니, 처음 써보는 사람도 금방 익힐 수 있겠더라고요.

여기서 삽질했던 부분들

Redux를 쓸 때 가장 고생했던 게 + 상태 불변성 유지, 미들웨어 연동, 그리고 타입스크립트 설정이었어요. 특히 초보자라면 thunk나 saga 설정할 때 막히는 경우가 많더라고요.

// Redux Toolkit에서 액션 호출 시 타입 오류 발생 예
const increment = createAction('increment')
// 엄청나게 복잡한 dispatch 타입 설정 필요

Zustand는 상대적으로 이 부분이 심플해서 설정할 때 시간이 훨씬 덜 걸렸고, 별도의 미들웨어 설정 없이도 간단한 비동기 로직 구현이 가능했어요.

성능과 메모리 사용량 비교

제가 직접 프로파일링을 돌려본 결과, 메모리 사용량과 리렌더 횟수에서 약간의 차이가 있었어요. Redux는 내부 구조상 불변성 강제 때문에 참조 비교가 많고, 리렌더 트리거가 더 자주 발생했어요.

항목	Redux	Zustand
초기 메모리 사용량	약 12 MB	약 9 MB
상태 변경 시 평균 리렌더 횟수	5회	3회

특히 모바일 앱이나 리소스가 제한적인 환경에서는 Zustand가 좀 더 유리해 보였어요.

자주 물어보시는 것들

Q. Redux 미들웨어는 꼭 필요한가요?

A. 대규모 상태나 복잡한 비동기 로직을 관리할 땐 도움 되지만, 간단한 프로젝트에서는 꼭 필요한 건 아니에요. Zustand는 내장된 상태로 간단한 비동기까지 커버할 수 있습니다.

Q. 타입스크립트와 궁합은 어떤가요?

A. Redux Toolkit은 타입 안전성을 잘 지원하지만 설정 복잡도가 있습니다. Zustand도 타입스크립트 지원이 좋고, 훨씬 간단해서 타입 초보자에게 더 친절한 편입니다.

제가 직접 구현하고 겪은 경험과 수치 기반 비교가 상태관리 라이브러리 선택 고민에 도움이 되었으면 좋겠네요. 앞으로도 프로젝트 규모와 상황에 따라 이 둘을 어떻게 적절히 써야 할지 계속 경험 쌓아가려고 합니다.