TanStack Query 강좌 #2 에러/로딩 처리
enabled 옵션은 쿼리 실행 여부를 제어하며, 특정 조건(예: 버튼 클릭, 권한 확인)에 따라 데이터 패칭을 시작할 때 유용합니다. 🚦
refetchInterval 옵션은 지정된 시간(밀리초)마다 쿼리를 자동으로 다시 실행하여 주식이나 코인 가격과 같은 실시간 데이터를 최신 상태로 유지하는 데 사용됩니다. ⏱️
refetchOnWindowFocus는 브라우저 창에 다시 포커스가 맞춰질 때 쿼리를 자동으로 리패치하는 옵션으로, 기본값은 true이며 불필요한 요청을 줄이기 위해 false로 설정할 수 있습니다. 🌐
staleTime은 데이터가 패치된 후 얼마나 오랫동안 '신선한' 상태로 간주될지 정의하며, 이 시간이 지나면 데이터는 '오래된' 상태가 되어 특정 조건에서 리패치를 유발합니다. 🍎
staleTime의 기본값은 0으로, 데이터를 가져오자마자 '오래된' 상태가 되므로 특별히 설정하지 않으면 항상 최신 데이터를 요청하게 됩니다. ⏳
gcTime(Garbage Collection Time)은 비활성 상태의 캐시된 데이터가 메모리에서 제거되기 전까지 유지되는 시간을 결정하며, 컴포넌트 언마운트 시 타이머가 시작됩니다. 🗑️
staleTime은 데이터의 신선도(언제 리패치할지)를 관리하고, gcTime은 캐시된 데이터의 메모리 유지 기간(언제 삭제할지)을 관리하는 서로 다른 개념입니다. 🧠
- 일반적으로
staleTime은 gcTime보다 같거나 짧게 설정하여, 캐시된 데이터가 메모리에서 삭제되기 전에 신선도 관리가 이루어지도록 하는 것이 좋습니다. ⚖️
- 변경이 드문 데이터는
staleTime을 길게 설정하여 네트워크 트래픽을 줄이고, 실시간 데이터는 staleTime을 짧게 설정하여 항상 최신 데이터를 유지합니다. 📈
- 자주 재사용되는 데이터는
gcTime을 길게 설정하여 빠른 렌더링을 돕고, 메모리 사용을 최소화하려면 gcTime을 짧게 설정할 수 있습니다. 🚀
- TanStack Query 옵션 설정 시 서비스 특성, 데이터 성격, 네트워크 트래픽, 사용자 경험, 메모리 효율 등을 종합적으로 고려하여 최적의 값을 찾아야 합니다. 🛠️