AI 요약관련 정보

• TanStack Query는 useQuery 훅을 통해 백엔드 데이터 페칭을 간소화하고 useEffect의 복잡성을 피하게 해줍니다. 🚀
• queryKey는 각 쿼리에 고유한 식별자를 제공하며, TanStack Query가 요청 데이터를 캐싱하는 데 핵심적인 역할을 합니다. 🔑
• TanStack Query는 응답 데이터를 내부 캐시에 저장하여, 동일한 쿼리 키로 다시 요청 시 네트워크 호출 없이 캐시된 데이터를 재사용합니다. 🧠
• 캐시된 데이터는 'fresh' 또는 'stale' 상태를 가지며, 'fresh' 데이터는 즉시 사용되고 'stale' 데이터는 재요청을 통해 업데이트됩니다. 🔄
• 기본적으로 데이터는 즉시 'stale' 상태가 되어 매번 네트워크 요청을 발생시키지만, staleTime 옵션을 설정하여 'fresh' 상태를 유지할 수 있습니다. ⏱️
• staleTime은 데이터가 'fresh' 상태로 유지될 밀리초를 지정하며, 이 시간 동안은 캐시된 데이터가 재사용되어 리소스와 시간을 절약합니다. 💰
• 실시간으로 자주 변하는 데이터(예: 주식, 라이브 메시지)는 staleTime을 짧게 또는 없게 설정하고, 비교적 정적인 데이터(예: 사용자 정보)는 staleTime을 길게 설정하는 것이 좋습니다. 📈
• staleTime을 Infinity로 설정하면 첫 요청 이후에는 자동으로 데이터를 다시 가져오지 않지만, 수동으로 'stale' 상태로 만들 수 있습니다. 🌌
• 쿼리 무효화(Query Invalidation)는 데이터가 오래되었음을 쿼리 클라이언트에 알려 강제로 데이터를 업데이트하도록 트리거하는 과정입니다. 🗑️
• queryClient.invalidateQueries({ queryKey: [...] })를 사용하여 특정 쿼리를 'stale'로 표시하고, 해당 쿼리가 사용 중이면 즉시 재페칭하여 UI를 업데이트합니다. ✨
• 쿼리 키는 하드코딩 대신 쿼리 옵션 함수에서 직접 가져와 재사용성을 높이는 것이 유지보수에 유리합니다. 🏗️
• 데이터 생성, 업데이트, 삭제 후 invalidateQueries를 사용하면 페이지 새로고침 없이 즉시 최신 데이터를 반영할 수 있습니다. 💡