💻 React Query의 개발자 도구
개발자도구는 앱에 추가할 수 있는 컴포넌트로 개발 중인 모든 쿼리의 상태를 표시해 주고 예상대로 작동하지 않는 경우 문제 해결에 도움을 준다.
- 쿼리키로 쿼리를 표시해 줌
- 활성(active), 비활성(inactive), 만료(stale) 등 모든 쿼리의 상태를 알려줌
- 마지막으로 업데이트된 타임스탬프를 알려줌
- 쿼리에 의해 반환된 데이터를 확인할 수 있는 데이터 탐색기가 있음
- 쿼리를 볼수있는 쿼리탐색기가 있음
🖤 적용하기
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
function App() {
return (
<QueryClientProvider client={queryClient}>
{/* The rest of your application */}
<ReactQueryDevtools />
</QueryClientProvider>
);
}- 결과
데이터확인
쿼리확인
현재 프로젝트에 있는 쿼리posts를 확인할 수 있다. 해당 쿼리는 stale(만료)상태로 오전 10:57:58에 마지막으로 업데이트된 것을 알수있다.
- Actions
-Refetch: 새 데이터를 확인
-Invalidate: 무효화하며 Refetch가 트리거됨
ㅇ 트리거는 어느 특정한 동작에 반응해 자동으로 필요한 동작을 실행하는 것이다.
-Remove: 캐시에서 완전히 제거 가능
✨ stale은 페이지를 새로고침하면 fetching에서 stale로 바로 변경된다.
🖤 stale data
데이터 리페칭은 만료된 데이터에서만 실행된다. 이외에도 여러 트리거가 있다. staleTime은 데이터를 허용하는 최대 나이라고 할 수 있다. 데이터가 만료됐다고 판단하기 전까지 허용하는 시간이다. 예로 블로그 게시물의 경우에 10초까지는 기존(오래된) 데이터를 허용할 수 있다. 즉 데이터가 신선한 상태로 남아 있는 시간을 말한다. 리액트 쿼리에서의 기본값은 0ms이며 이는 데이터를 패치해오자마자 신선하지 않다고 간주하는 것이다.
리액트쿼리에서 데이터는 fresh한 데이터일 수도, stale한 데이터일 수도 있다. fresh한 데이터라면, API 호출 없이 저장된(캐싱된)데이터가 다시 사용된다. stale한 데이터라면, 윈도우에 다시 포커스 되었을 때나, 컴포넌트가 다시 마운트될때나, 네트워크가 다시 연결되었을 때 등 신선한 데이터를 다시 패치해 올 것이다.
- 코드적용
const { data, isError, error, isLoading } = useQuery("posts", fetchPosts, { staleTime: 2000 });
❗ React Query에서 staleTime의 기본값은 0ms인 이유
'업데이트가 왜 안되죠?'보다 '데이터가 어떻게 늘 최신 상태를 유지하나요?'가 훨씬 나은 질문이며, staleTime의 기본값을 0으로 설정했다는 말은 데이터는 항상 만료 상태이므로 서버에서 다시 가져와야 한다고 가정한다는 뜻이다. 그러면 클라이언트에게 만료된 데이터를 제공할 가능성이 훨씬 줄어든다.
🖤 staleTime vs cacheTime
-cacheTime: 메모리에 저장된 캐싱 데이터가 유효한 시간으로, 리액트쿼리에서의 기본값은 300000 (5분)이다. 쿼리를 사용하는 모든 컴포넌트가 언마운트되었을 때, 쿼리는 비활성화상태가 된다. 비활성화된 데이터는 캐시에서 삭제된다.
*API요청을 통해 신선한 데이터를 완전히 가져오기 전까지 리액트 쿼리는 캐싱된 데이터를 사용
✔ 활용예시
staleTime 기본값이 0인 이상 데이터는 절대 프레시하다고 간주할 수 없다. 만약 사용하는 데이터가 자주 변경되는 데이터라면, 기본설정을 바꾸지 않는 것을 추천한다. 그렇지만 데이터의 변경이 자주 일어나지 않는다면, staleTime을 조정하여 사용하는 게 더 이득일수있다. 불필요한 API호출을 줄일수있기 때문이다.
예를 들어 변경할 사용자가 로그인한 유저 한명일 경우 stalTime을 infinity로 설정하고 POST/UPDATE/DELETE 이벤트가 발생했을 경우에만 쿼리 무효화를 통해 새로운 데이터를 갱신하여 불필요한 HTTP요청을 줄이고 효과적으로 서버 데이터를 관리할 수 있다.
참고자료
리액트 쿼리의 StaleTime과 CacheTime
React Query : React로 서버 상태 관리하기(유데미)
