Skip to content

Zustand와 Redux 중 무엇을 사용하면 좋을까? #48

@sernan96

Description

@sernan96

Zustand와 Redux에 대해 issue를 작성하게 된 계기

최근 당근마켓 프론트엔드 모집 글을 읽다가 상태관리 툴의 예시로 zustand를 보지 못하여 😭
혹시 제가 쉬운 길만 고집하느라 Redux를 사용하지 않은 것인가 하는 혼자만의 생각에 빠진 찰나 조사해보게 되었습니다.

image


1. Zustand와 Redux의 개념

Zustand

  • 경량 상태 관리 라이브러리로, 함수 기반의 간단한 API를 제공하여 상태 관리의 복잡성을 줄입니다.
  • 상태와 상태 변경 로직을 분리하지 않고 하나의 스토어에 포함시켜, 직관적인 상태 관리가 가능합니다.
  • 상태는 직접적인 getter와 setter 메서드로 접근할 수 있으며, React와의 결합도가 낮습니다.
  • Context API를 사용하지 않고도 전역 상태를 관리할 수 있으며, 컴포넌트의 재렌더링을 최소화하는데 최적화되어 있습니다.

Redux

  • 전역 상태 관리를 위한 Flux 아키텍처 기반의 라이브러리입니다.
  • 상태는 불변성을 유지하며, **액션(Action)과 리듀서(Reducer)**로 상태 변경 로직을 관리합니다.
  • 미들웨어를 통해 비동기 로직을 처리하고, 상태 변경이 예측 가능한 구조로 관리됩니다.
  • Redux DevTools와 같은 강력한 디버깅 도구를 제공하여 상태의 변화 추적이 용이합니다.

2. Zustand와 Redux의 사용 시점

Zustand를 사용하기 좋은 경우

  • 작고 간단한 프로젝트: 앱의 상태가 복잡하지 않고, 상태 변경이 매우 직관적인 경우에 적합합니다. 적은 설정으로도 간단하게 전역 상태를 관리할 수 있습니다.
  • 빠른 개발과 유지보수: 보일러플레이트 코드가 거의 없어서, 빠른 프로토타이핑이나 유지보수가 필요한 프로젝트에 적합합니다.
  • 고성능 요구 사항: Zustand는 컴포넌트별로 구독할 상태를 세분화할 수 있어, 상태 변경 시 필요 없는 컴포넌트가 재렌더링되지 않습니다. 따라서 고성능 애플리케이션에서 렌더링 최적화가 중요한 경우 유리합니다.
  • Redux의 복잡성이 불필요한 경우: Redux의 액션, 리듀서, 미들웨어 등 구조적 설정이 필요하지 않은 단순한 상태 관리가 필요할 때.

Redux를 사용하기 좋은 경우

  • 복잡한 상태 관리와 예측 가능한 상태 변화: 상태 변경이 복잡하거나 예측 가능성이 중요한 애플리케이션에서는 Redux가 적합합니다. 액션과 리듀서를 사용하여 상태 변화의 흐름을 명확히 할 수 있습니다.
  • 대규모 애플리케이션: 많은 개발자들이 협업하는 프로젝트나 상태 구조가 복잡한 대규모 프로젝트에서는, Redux의 구조적 패턴과 개발 도구가 큰 도움이 됩니다.
  • 서드파티 미들웨어: 비동기 작업(예: redux-thunk, redux-saga) 또는 로깅, 에러 추적과 같은 추가 기능을 활용해야 하는 경우, Redux의 강력한 미들웨어 생태계를 활용할 수 있습니다.
  • 기존 Redux를 사용하는 프로젝트와의 호환성: 기존에 Redux로 상태를 관리하는 프로젝트가 있을 경우, 새로운 상태 관리 라이브러리를 도입하는 것보다 Redux의 기능을 확장하는 것이 더 효율적일 수 있습니다.

3. 결론 및 선택 가이드

  • Zustand는 작은 규모의 프로젝트나 상태 관리가 간단한 애플리케이션에 적합하며, 빠른 개발과 최적화가 필요한 경우 유리합니다.
  • Redux는 복잡한 상태 관리가 필요한 대규모 애플리케이션에서 예측 가능한 상태 관리와 협업을 위한 표준적이고 견고한 패턴을 제공합니다.
  • 따라서 이번 프로젝트 같은 상태가 다양하지 않고 대규모 서비스가 아닌 경우에는 Zustand가 더 적합하다고 보면 되겠습니다.^^

요약

기준 Zustand Redux
프로젝트 규모 작고 간단한 프로젝트 대규모, 복잡한 프로젝트
설정과 보일러플레이트 거의 없음 비교적 많음
상태 관리 방식 함수 기반의 간단한 접근법 액션과 리듀서를 통한 예측 가능한 상태 관리
비동기 로직 처리 직접 구현하거나 React Query 등과 조합 사용 미들웨어를 통한 비동기 로직 관리
렌더링 최적화 세분화된 구독으로 성능 최적화 가능 리듀서 단위로 상태가 바뀌면 모든 구독 컴포넌트가 렌더링됨

Zustand와 Redux 모두 각자의 장단점이 있으므로, 프로젝트의 특성과 요구 사항에 맞춰 선택하는 것이 중요합니다.😊

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions