[React] TanStack Query 캐시 레벨과 옵저버 레벨

동일한 쿼리 키를 사용하는 useQuery 를 여러 컴포넌트에서 사용할 수 있습니다. 이런 경우 보통 커스텀 훅으로 구현하여 여러 컴포넌트에서 사용합니다. 캐시 레벨 (Cache level)각각의 쿼리 키에 대해서, 캐시 엔트리는 오직 한 개만 존재합니다. 즉, 동일한 쿼리 키를 가진 useQuery 를 여러 곳에서 사용해도 캐시 엔트리는 하나입니다. 이 캐시 엔트리에 대응하는 레벨을 캐시 레벨이라고 합니다. 캐시 레벨에서 작동하는 useQuery 의 옵션으로는 staleTime 과 gcTime 이 있습니다. 캐시 엔트리는 하나만 있기 때문에, 해당 옵션들은 엔트리가 오래되는 시점 또는 가비지 컬렉션이 될 수 있는 시점을 특정합니다.  옵저버 레벨 (On observer level)React Query의..

  • format_list_bulleted React
  • · 2025. 3. 2.
  • textsms

[React] TanStack Query v5 마이그레이션 준비

React Query를 v3에서 v5로 마이그레이션하기 위해 React Query의 전반적인 개념들을 깊이 있게 학습했고 기존 버전과 호환되지 않는 변경점들을 파악했습니다. Installv3에서는 React Query, v5에서는 TanStack Query라고 표현하지만 편의상 React Query라고 통일합니다.yarn remove react-queryyarn add @tanstack/react-query Important DefaultsReact Query를 사용하여 개발할 때 알아둘 필요가 있는 주요 기본값들이 있습니다. 이 값들은 React Query의 기본적인 동작 원리와 관련이 있습니다.staleTimegcTimeretrystructuralSharingstaleTimestale 상태란 쿼리가 ..

  • format_list_bulleted React
  • · 2025. 2. 26.
  • textsms