Zustand <> React Query

Zustand

전역 상태 관리 라이브러리

• 장점
  • 작고 가볍고, 러닝 커브가 낮다
  • Context API의 불필요한 리렌더링 문제를 해결
  • Immer, devtools 등과 쉽게 연동 가능.
    • Immer = 불변성을 쉽게 유지하게 도와주는 라이브러리
    • Zustand에서 상태를 바꿀 때, 객체를 직접 변경하는 대신 Immer의 prduce함수를 써서 직관적으로 상태를 업데이트할 수 있게 해줌

• 단점
  • 서버 상태 관리 기능이 없음
  • 데이터 비동기 처리 패턴을 일관성 있게 관리하기 어렵고, 로딩/에러 상태도 직접 관리

• 사용처
  • 로그인한 유저 정보, 토글 상태, 모달 열림/닫힘, UI상태 등 클라이언트 전역 상태 관리에 적합

React Query (TanStack Query)

서버 상태 관리 라이브러리

• 장점
  • API 요청 결과를 자동으로 캐싱 → 새로고침/탭 전환 시에도 데이터 유지
  • refetch, pagination, infinite scroll, prefetch 등 서버 데이터 관련 기능이 풍부
  • 로딩,에러,성공 상태 관리가 자동화
  • 서버 데이터와 클라이언트 UI의 동기화를 쉽게 보장

• 단점
  • 전역 상태 관리 목적이 아님 (UI 상태 관리에는 부적합)
  • 러닝 커브가 Zustand보다 조금 있음
  • 비즈니스 로직이 대부분 API 데이터와 얽혀 있다면 지나치게 React Query에 의존할 수도 있다.

• 사용처
  • 게시글 목록, 사용자 프로필 API, 무한 스크롤 데이터, 실시간 서버 데이터 등 서버 데이터 동기화에 최적

차이점 요약

• UI/로컬 상태 = Zustand
• 서버 데이터 = React Query