feedback

zustand

데이터를 관리하는 store를 설계할 때는 도메인/기능 단위로 나누는 것이 좋다
각각의 API마다 store를 만들기보다는, 연관된 데이터와 기능을 하나의 store로 그룹화하는 것을 추천

현재 프로젝트 기준으로

도메인 기반 분리:
유저 관련 데이터는 userStore
투표 관련 데이터는 votingStore
각 도메인별로 관련 데이터와 액션을 그룹화

상태 표준화:
모든 API 응답 데이터는 동일한 구조 (data, isLoading, error)
상태 관리 일관성 유지
로딩/에러 상태 쉽게 처리 가능

zustand & react query

React Query와 Zustand를 함께 사용하는 것은 매우 좋은 방법이다
각각의 장점을 활용하여 더 효율적인 상태 관리가 가능하다

• React Query: 서버 상태 관리 (API 데이터 캐싱, 자동 재검증, 낙관적 업데이트 등)
• Zustand: 클라이언트 로컬 상태 관리 (UI 상태, 사용자 설정 등)

주요 특징과 장점

명확한 관심사 분리:
React Query: 서버 데이터 관리 (투표 이벤트, 결과 등)
Zustand: 클라이언트 상태 관리 (인증 정보, UI 상태 등)

효율적인 캐싱과 상태 관리:
React Query의 자동 캐싱으로 불필요한 API 호출 감소
Zustand의 간단한 상태 업데이트로 UI 반응성 향상

타입 안전성:
TypeScript를 통한 엄격한 타입 체크
API 응답 타입 정의로 런타임 에러 방지

최적화된 성능:
React Query의 staleTime, cacheTime 최적화
Zustand의 선택적 구독으로 불필요한 리렌더링 방지

개발 편의성:
React Query Devtools로 캐시 상태 모니터링
중앙화된 API 클라이언트 설정
재사용 가능한 커스텀 훅

• 데이터 일관성 유지가 쉬워진다
• 코드 재사용성이 향상된다
• 상태 관리 로직이 명확해진다
• 성능이 최적화된다
• 개발자 경험이 개선된다

react query 기본세팅

import { QueryClient } from '@tanstack/react-query'

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60 * 1000, // 1 minute
      cacheTime: 60 * 60 * 1000, // 1 hour
      refetchOnWindowFocus: false,
      retry: 1
    },
    mutations: {
      retry: 1
    }
  }
})

staleTime: 60 * 1000 (1분)

• 데이터가 "신선(fresh)"하다고 간주되는 시간을 밀리초 단위로 설정
• 이 시간 동안은 데이터를 다시 가져오지 않음
• 1분 동안은 캐시된 데이터를 재사용하며, 새로운 API 요청을 하지 않음
• 기본값은 0 (즉, 매번 새로운 데이터를 가져오려고 시도)

cacheTime: 60 60 1000 (1시간)

• 비활성 쿼리 결과가 캐시에 남아있는 시간
• 이 시간이 지나면 가비지 컬렉터가 캐시를 제거
• 예를 들어, 사용자가 페이지를 벗어났다가 1시간 이내에 돌아오면 캐시된 데이터를 볼 수 있음
• 기본값은 5분

refetchOnWindowFocus: false

• 브라우저 창이 다시 포커스될 때 데이터를 자동으로 다시 가져올지 설정
• true일 경우: 사용자가 다른 탭을 갔다가 돌아올 때 데이터를 새로 가져옴
• false로 설정하면 이 자동 갱신 기능을 비활성화
• 기본값은 true

retry: 1

• 쿼리 요청 실패 시 재시도 횟수
• 1로 설정하면 실패 시 한 번만 더 시도
• 기본값은 3

mutations: { retry: 1 }

• 변경(mutation) 작업 실패 시 재시도 횟수
• 쿼리의 retry와 동일한 방식으로 작동
• 기본값은 0

애플리케이션의 특성에 따라 조정

• 자주 변경되는 데이터는 staleTime을 짧게 설정
• 자주 변경되지 않는 데이터는 staleTime을 길게 설정
• 중요한 데이터 요청은 retry 횟수를 늘림
• 네트워크 상태가 불안정한 환경에서는 retry 횟수를 늘림