[React] React-Query - Dev Tools

지금까지 React Query에 대해서 공부를 했었는데, 

redux devTools은 있는 것을 알았는데, React-Query DevTools이 있다는 것은 방금(글쓰기 전 ㅋ )

알아서 지금 추가로 정리하려고 글을 작성한다. 

 

기본적으로 Dev Tools은 React-Query에서 기본적으로 제공하기 때문에 추가적인 패키지를 설치할 

필요가 없다. 

 

또한 Development 모드에서만 작동하고, Production 모드, 즉 배포 상태에서 제외 시키는 작업은 

안해도 된다. 

 

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

import { QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";

// ...

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
      <ReactQueryDevtools />
    </QueryClientProvider>
  </React.StrictMode>
);

react-query/devtools 에서 ReactQueryDevtools를 태그로 사용하면 아주 간단하게 실행된다. 

눌러보면 아주 강력한 기능을 보여주는데,

다음과 같이 데이터를 전부 확인이 가능하다.