Zustand vs TanStack Query, 같이 쓰자!

 

🐻

요즘 프론트엔드 프로젝트에서 Zustand + TanStack Query가 자연스럽게 같이 등장한다.

처음에는 둘 다 상태 관리처럼 보여서 이거 둘 중 하나만 쓰면 되는 거 아닌가? 싶었는데 역할이 완전히 다르다.

이번 글에서는 실제 로그인 플로우를 구현하면서 느낀 차이를 정리해본다.

---

 

1. Zustand는 무엇인가?

Zustand는 전역 상태 관리 라이브러리다.
Redux보다 훨씬 간단하고, 보일러플레이트도 거의 없다.

프론트 내부 상태를 저장하는 곳으로,

예를 들면 로그인 모달 열림 여부, 다크모드 상태, 사이드바 열림/닫힘, 사용자가 선택한 탭

이런 것들을 저장한다.

 

사용예

import { create } from 'zustand'

export const useStore = create((set) => ({
  isOpen: false,
  toggle: () => set((state) => ({ isOpen: !state.isOpen })),
}))

 

 

2. TanStack Query는 무엇인가?

TanStack Query 서버 데이터 관리 엔진이다.

즉, API 호출을 중심으로 돌아가는 라이브러리다.

단순히 fetch만 하는 게 아니라

캐싱, 자동 재요청, 로딩 상태 관리, 에러 처리, 데이터 동기화 등

이런걸 전부 알아서 해준다.

 

예를 들어 로그인 상태를 확인하는 API가 있다고 해보자.

import { useQuery } from '@tanstack/react-query'
import axios from 'axios'

export const useAuthQuery = () => {
  return useQuery({
    queryKey: ['auth'],
    queryFn: async () => {
      const res = await axios.get('/api/auth/me', {
        withCredentials: true,
      })
      return res.data
    },
    retry: false,
  })
}

이 한 줄로 “로그인 상태 + 캐싱 + 로딩 + 에러 처리”가 다 해결된다.

 

3. 둘의 차이 한 번에 정리

구분	Zustand	TanStack Query
역할	클라이언트 상태	서버 상태
데이터 위치	브라우저	서버
주요 기능	상태 저장	API 관리
로딩/에러	직접 구현	자동 제공

핵심은 “데이터가 어디에서 왔느냐”

🟡 서버에서 왔다 → TanStack Query
🟢 프론트에서 만든 상태다 → Zustand

 

 

---

 

 

4. 로그인 구현에서의 실제 차이

카카오 로그인 기반으로 구현하면서 이 차이가 더 명확해졌다.

1. 로그인 성공 → accessToken, refreshToken 쿠키 저장
2. 프론트는 토큰을 읽을 수 없음 (httpOnly 쿠키)
3. API로 로그인 여부 확인

 

여기서 중요한 포인트, 로그인 여부는 서버에 물어봐야 한다는 것

즉, 이건 Zustand가 아니라 TanStack Query 영역이다.

 

🌟 올바른 구조

처음엔 Zustand에 유저 상태를 저장하려고 했다.

그렇게 하면 문제는 페이지 이동마다 API를 호출 해야하고, 동기화가 깨지며 상태가 꼬인다.

그래서 TanStack Query에는 서버 상태를 저장하고, Zustand에는 UI 상태를 저장하는 구조로 바꾸는 게 맞다!

 

1. TanStack Query → 서버 상태

const { data, isLoading, isError } = useAuthQuery()

🟡 로그인 여부 판단
🟡 유저 정보 가져오기
🟡 자동 캐싱

2. Zustand → UI 상태

isLoginModalOpen: false
toggleLoginModal: () => {}

🟢 모달 열림 여부
🟢 UI 상태 관리

 

5. 실제 흐름

최종적인 로그인 흐름:

브라우저 접속 (/)
→ 로그인 검증 API 요청
→ 서버가 로그인 여부 판단
→ TanStack Query가 결과 관리
→ 라우팅 분기 (/home 또는 /login)

여기서 Zustand는 등장하지 않는다.

 

 

결론

처음엔 둘 다 상태 관리처럼 보여서 헷갈리지만
실제로 써보면 완전히 다른 도구라는 걸 알게 된다.

 

서버 데이터는 TanStack Query로 관리
UI 상태는 Zustand로 관리

 

이 구조로 가면 코드가 훨씬 단순해지고,
특히 로그인 같은 인증 로직이 안정적으로 돌아간다.