TanStack Query + Zustand: 서버 상태와 클라이언트 상태를 분리하는 패턴과 안티패턴

import { create } from 'zustand'
 
interface UIState {
  isModalOpen: boolean
  openModal: () => void
  closeModal: () => void
}
 
const useUIStore = create<UIState>((set) => ({
  isModalOpen: false,
  openModal: () => set({ isModalOpen: true }),
  closeModal: () => set({ isModalOpen: false }),
}))

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { create } from 'zustand'
 
// ✅ 서버 상태 — TanStack Query 담당
// 캐싱, 리페칭, 로딩/에러 상태가 자동으로 처리됩니다
function useProducts() {
  return useQuery({
    queryKey: ['products'],
    queryFn: async () => {
      const res = await fetch('/api/products')
      if (!res.ok) throw new Error('상품 목록을 불러오지 못했습니다')
      return res.json()
    },
    staleTime: 1000 * 60 * 5, // 5분간 fresh 유지
  })
}
 
// ✅ 클라이언트 상태 — Zustand 담당
// 페이지를 새로고침하면 초기화되는 순수 UI 상태입니다
interface CartState {
  selectedItems: string[]
  addItem: (id: string) => void
  removeItem: (id: string) => void
}
 
const useCartStore = create<CartState>((set) => ({
  selectedItems: [],
  addItem: (id) => set((state) => ({
    selectedItems: [...state.selectedItems, id],
  })),
  removeItem: (id) => set((state) => ({
    selectedItems: state.selectedItems.filter((item) => item !== id),
  })),
}))

// Zustand: 사용자가 조작하는 필터값 (클라이언트 상태)
interface FilterState {
  keyword: string
  category: string
  setKeyword: (keyword: string) => void
  setCategory: (category: string) => void
}
 
const useFilterStore = create<FilterState>((set) => ({
  keyword: '',
  category: 'all',
  setKeyword: (keyword) => set({ keyword }),
  setCategory: (category) => set({ category }),
}))
 
// TanStack Query: 필터값을 queryKey에 포함시켜 서버 조회
function useFilteredProducts() {
  // 선택자(selector)로 필요한 상태만 구독합니다
  // 통째로 구독하면 keyword, category와 무관한 변경에도 리렌더링이 발생할 수 있습니다
  const keyword = useFilterStore((s) => s.keyword)
  const category = useFilterStore((s) => s.category)
 
  return useQuery({
    queryKey: ['products', { keyword, category }],
    queryFn: () => fetchProducts({ keyword, category }),
    // v4의 keepPreviousData를 대체하는 v5 방식 — 필터 전환 시 이전 데이터를 유지해 깜빡임을 방지합니다
    placeholderData: (previousData) => previousData,
  })
}

// Zustand: 토스트 같은 순수 UI 피드백 상태
const useUIStore = create<{ toastMessage: string; showToast: (msg: string) => void }>((set) => ({
  toastMessage: '',
  showToast: (msg) => {
    set({ toastMessage: msg })
    setTimeout(() => set({ toastMessage: '' }), 3000)
  },
}))
 
// TanStack Query: 뮤테이션 처리 및 캐시 무효화
function useUpdateProfile(userId: string) {
  const queryClient = useQueryClient()
  const { showToast } = useUIStore()
 
  return useMutation({
    mutationFn: updateUserProfile,
    onSuccess: () => {
      // 서버 상태 갱신 — Query 캐시를 무효화해 자동 리페치
      queryClient.invalidateQueries({ queryKey: ['user', userId] })
      showToast('프로필이 업데이트되었습니다')
    },
    onError: () => {
      showToast('업데이트에 실패했습니다. 다시 시도해 주세요')
    },
  })
}

// Zustand: 폼의 현재 단계와 입력 데이터 (클라이언트 상태)
interface FormStore {
  step: number
  // 실제 프로젝트에서는 각 단계별 타입을 union으로 구체화하는 것을 권장합니다
  // 예: type StepData = Step1Data | Step2Data | Step3Data
  formData: Record<string, unknown>
  nextStep: () => void
  prevStep: () => void
  setField: (key: string, value: unknown) => void
  reset: () => void
}
 
const useFormStore = create<FormStore>((set) => ({
  step: 1,
  formData: {},
  nextStep: () => set((s) => ({ step: s.step + 1 })),
  prevStep: () => set((s) => ({ step: Math.max(1, s.step - 1) })),
  setField: (key, value) =>
    set((s) => ({ formData: { ...s.formData, [key]: value } })),
  reset: () => set({ step: 1, formData: {} }),
}))
 
// TanStack Query: 최종 제출만 담당 (서버와 통신)
function useSubmitOrder() {
  const { formData, reset } = useFormStore()
 
  return useMutation({
    mutationFn: () => submitOrder(formData),
    onSuccess: () => {
      reset() // 제출 후 폼 초기화
    },
  })
}