State Management Tools/React-Query5 [React-Query v3] staleTime과 cacheTime staleTime은 데이터가 만료됐다고 판단하기전까지 허용하는 시간이 staleTime입니다. 웹사이트에 표시된 데이터가 10초정도는 그대로여도 괜찮다면 staleTime을 10초로 설정합니다. staleTime setup은 아래처럼 useQuery의 3번째 파라미터에서 설정해주면 됩니다. 참고로 useQuery의 3번째 파라미터가 useQuery의 옵션을 설정합니다. staleTime은 옵션중 하나입니다. const { data, isError, isLoading } = useQuery("posts", fetchPosts, { staleTime: 10000 }); //10초 staleTime과 cacheTime 차이점 staleTime은 refetching할때의 고려사항이고 cacheTime은 다시 사.. 2023. 1. 4. [React-Query v3] 리액트 쿼리 개발자도구(React Query Devtools) 셋업 index.js 에서 셋업을 합니다. react-query/devtools 에서 ReactQueryDevtools를 import 하여 Provider위에 작성해주시면 됩니다. import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; import { QueryClientProvider, QueryClient } from "react-query"; import { ReactQueryDevtools } from "react-query/devtools"; const queryClient = .. 2023. 1. 4. [React-Query v3] isLoading 과 isFetching 차이 isFetching은 비동기 쿼리가 해결되지 않았음을 의미합니다. 아직 Fetching을 완료하지 않았지만 쿼리가 Axios 호출 또는 GraphQL호출일 수 있습니다. isLoading은 데이터를 가져오는 상태에 있음을 의미합니다. 쿼리 함수가 아직 완료되지 않음을 의미합니다. 그리고 캐시된 데이터도 없습니다. 별 차이는 없어보이지만, Pagination이나 Infinite scroll 을 구현할 때 캐시된 데이터가 있는가에 따라 isFetching 과 isLoading을 구분하여 사용할 수 있다. 2023. 1. 4. [React-Query v3] 리액트 쿼리 간단히 적용해보기 쿼리 생성하기 1. 리액트 쿼리 라이브러리를 다운로드한다. npm i react-query 2. 쿼리를 사용할 모든 컴포넌트의 최상위 부모 컴포넌트에서 쿼리 클라이언트를 공급한다. (여기서는 app.js 에서 공급) import { Posts } from "./Posts"; import "./App.css"; import { QueryClient, QueryClientProvider } from "react-query"; // 1. 쿼리 클라이언트 생성 // Client를 생성하면 Provider를 모든 자식 컴포넌트에 클라이언트를 사용할 수 있게 한다. const queryClient = new QueryClient(); function App() { return ( // 2. Provider를 사용하.. 2022. 7. 9. 이전 1 2 다음
