리액트쿼리 연습하기

React Query

https://tanstack.com/query/v4/?from=reactQueryV3&original=https://react-query-v3.tanstack.com/

TanStack Query | React Query, Solid Query, Svelte Query, Vue Query

리액트쿼리는 기존의 client state를 다루는 상태관리 라이브러리들과 다르게 sever state를 Fetching, Caching, 비동기적으로 업데이트 하는데 도움을 주는 라이브러리다.
리액트쿼리는 서버상태를 불러오고 캐싱하며 지속적으로 동기화하고 업데이트하는 작업을 도와준다. 간단하고 직관적으로 API를 사용할 수 있다는 특징이 있다. 캐싱, Window Focus Refetching등 다양한 기능을 활용해 API요청과 관련된 번잡한 작업 없이 핵심로직에 집중할 수 있다.

 

React-query import는 이제 @tankstack/ 으로 이용해야한다고 한다.

import { QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

const queryClient = new QueryClient();

React Query는 내부적으로 queryClient를 사용하여 각종 상태를 저장하고, 부가 기능을 제공한다.

function App(){
    return (
    <QueryClientProvider client={queryClient}>
        <Menus/>
          <ReactQueryDevtools/>
    </QueryClientProvider >
    )
}

QueryClientProvider로 컴포넌트를 감싼다. 그리고 client={방금 내가 지은 이름}을 넣어준다

그리고 리액트쿼리 데브툴스를 같이 쓰면 개발에 용이하다.

(데브툴스와 함께 쓸 때의 모습)

useQuery

서버로부터 데이터를 조회할 때 사용한다.

• useQuery 의 첫번째 인자값인 queryKey를 이용하여 캐싱된 값을 이용하거나 API로 데이터를 가져온다.

대표적인 인수로는 QueryKey, QueryFn, options...

//option 예시
DefaultOptions: {
      queries: {
        retry: false,
      },
      mutation: {
        retry: false,
      },
    },

 

대표적인 반환값으로는 isError, isSuccess, isLoading, isFetching...

const { data, refetch: getBookRemind } = useQuery(
    ["query"],
    () => axios.post("https://funphonics.ai:8443/api/all/ap003", {}),
    {
      staleTime: 60 * 60 * 1000, // 최신화가 필요해지는 기간(서버에 불필요한 같은 요청을 한시간동안 하지 않는다)
      cacheTime: 60 * 60 * 1000, // 데이터가 캐싱되어 있는 기간
      onError: (err) => {
      },
      onSuccess: (res) => {
      },
      onSettled: () => {
      },
      enabled: userCheck,
    }
  );

• Query들은 4개의 상태를 가지며, useQuery가 반환하는 객체의 프로퍼티로 어떤 상태인지 확인이 가능하다.
  1. fresh : 새롭게 추가된 쿼리 인스턴스 → active 상태의 시작, 기본 staleTime이 0이기 때문에 아무것도 설정을 안해주면 호출이 끝나고 바로 stale 상태로 변한다. staleTime을 늘려줄 경우 fresh한 상태가 유지되는데, 이때는 쿼리가 다시 마운트되도 패칭이 발생하지 않고 기존의 fresh한 값을 반환한다.
  2. fetching : 요청을 수행하는 중인 쿼리
  3. stale : 인스턴스가 존재하지만 이미 패칭이 완료된 쿼리. 특정 쿼리가 stale된 상태에서 같은 쿼리 마운트를 시도한다면 캐싱된 데이터를 반환하면서 리패칭을 시도한다.
  4. inactive : active 인스턴스가 하나도 없는 쿼리. inactive된 이후에도 cacheTime 동안 캐시된 데이터가 유지된다. cacheTime이 지나면 GC된다.
• 다음 4가지 경우에 리패칭이 일어난다
  1. 런타임에 stale인 특정 쿼리 인스턴스가 다시 만들어졌을 때
  2. window가 다시 포커스가 되었을때(옵션으로 끄고 키는게 가능)
  3. 네트워크가 다시 연결되었을 때(옵션으로 끄고 키는게 가능)
  4. refetch interval이 있을때 : 요청 실패한 쿼리는 디폴트로 3번 더 백그라운드단에서 요청하며, retry, retryDelay 옵션으로 간격과 횟수를 커스텀 가능하다.