[React Query] React Query Devtools 사용법

React Query Devtools 사용법

React Query 개발자 도구(Dev Tools)는 앱에 추가할 수 있는 컴포넌트로 개발 중인 모든 쿼리의 상태를 표시해 준다.

또한 예상대로 작동하지 않는 경우 문제를 해결하는 데 도움이 될 수도 있다.

 

기본적으로 개발자 도구는 NODE_ENV 변수에 따라 프로덕션 환경에 있는지 여부가 결정된다.

 

즉 개발 중일 때는 개발자 도구가 표시되고 프로덕션일 때는 표시되지 않는다.

 

 

import { ReactQueryDevtools } from 'react-query/devtools';

 

function App() {

  const queryClient = new QueryClient();

  return (

    <QueryClientProvider client={queryClient}>

      <div className="App">

        <h1>Blog Posts</h1>

        <Posts />

      </div>

      <ReactQueryDevtools/>

    </QueryClientProvider>

  );

}

 

ReactQueryDevtools를 import 하고 App에 추가하여 사용할 수 있다.

앱을 실행해보면 왼쪽 하단에 React Query 로고가 보이는데 이것이 개발자 도구이다.

 

 쿼리 키로 쿼리를 표시해 주고 활성(active), 비활성(inactive), 만료(stale) 등 모든 쿼리의 상태와 마지막으로 업데이트된 타임스탬프를 알려준다.

쿼리에 의해 반환된 데이터를 확인할 수 있는 데이터 탐색기도 있고 쿼리를 볼 수 있는 쿼리 탐색기도 있다.

여기서 쿼리를 실행할 수도 있다.

Refetch로 새 데이터를 확인할 수 있고 Invalidate로 무효화하면 Refetch가 트리거 되며 Remove로 캐시에서 완전히 제거할 수 있다.

fetch를 하면 fetching state에서 stale state로 즉시 바뀐다.

React Query에서 데이터 Refetching은 만료된 데이터에서만 실행된다.

staleTime은 데이터를 허용하는 max age라고 할 수 있다.

달리 말하면 데이터가 만료됐다고 판단하기 전까지 허용하는 시간이 staleTime이다.

웹사이트에 표시된 데이터가 10초까지는 그대로여도 괜찮다면 staleTime을 10초로 설정한다.

이는 데이터의 성격에 따라 달라지는데 블로그 게시물의 경우에 10초까지 오래된 데이터를 허용할만 하다.

 

const { data, isLoading, isError, error } = useQuery("posts", fetchPosts, {staleTime: 2000});

 

업데이트하는 방법은 useQuery를 호출할 때 세 번째 인수를 추가하는 것이며 ms 단위이다.

React Query에서 staleTime의 기본값은 0ms인데 staleTime의 기본값을 0으로 설정했다는 말은 데이터는 항상 만료 상태이므로 서버에서 다시 가져와야 한다는 의미다.

그러면 클라이언트에게 만료된 데이터를 제공할 가능성이 훨씬 줄어든다.

마지막으로 staleTime과 cacheTime의 차이가 있다.

앞서 확인했듯이 staleTime은 Refetching 할때 고려 사항이고 cacheTime은 나중에 다시 필요할 수도 있는 데이터를 사용할 때 고려 사항이다.

특정 쿼리에 대한 활성 useQuery가 없는 경우 해당 데이터는 콜드 스토리지로 이동한다.

설정된 cacheTime이 지나면 캐시의 데이터가 만료되며 유효 시간의 기본값은 5분이다.

cacheTime이 관찰하는 시간은 특정 쿼리에 대한 useQuery가 활성화된 후 경과한 시간이다.

캐시가 만료되면 가비지 컬렉션이 실행되고 클라이언트는 그 데이터를 사용할 수 없다.

다음에 쿼리가 호출될 때 쿼리 함수가 실행되어 새로운 데이터를 가져와서 캐시한다.

새로운 데이터를 가져온다면 계속해서 빈 페이지나 로딩 페이지를 보는 경우가 생길 수 있다.

캐시를 통해서 새로운 데이터를 수집하는 동안 약간 오래된 데이터를 표시하는 편이 빈 페이지보다 더 나은 사용자 경험이다.

만약 만료된 데이터가 위험할 수 있는 애플리케이션의 경우에는 cacheTime을 0으로 설정한다.

요약하면, staleTime은 만료된 데이터를 사용할 수 있는 시간을 설정하고, cacheTime은 캐시된 데이터를 유지하는 전체 기간을 설정한다.

두 옵션은 서로 다른 목적을 가지고 있으며, 필요에 따라 적절히 조절하여 사용할 수 있다.