React-Query(useQuery)

React-Query란 ?
전역상태를 건드리지 않고 웹서버에서 데이터를 가져오고, 캐시하고 업데이트 할 수 있게 해주는 라이브러리이다. 전용 devtools를 지원하며, 코드량이 줄어들고, 간편하게 동기화, 캐싱, 업데이트를 할 수 있다.

1. RTK-Query? React-Query?

간단한 CRUD 미니 프로젝트를 하면서 데이터를 좀 더 수월하고, 편하게 다룰 수 있는 법을 찾아보다가 마침 Redux를 사용하고 있어서, Redux에 속해 있는 RTK-Query를 알게되었고, React-Query는 존재만 알고 있었지만 사용해본적은 없어서 둘 중 어떤 것을 프로젝트에 사용할것인지 고민했다.

나의 선택

가끔 질문드리는 멘토님의 답변으로는 RTK-Query보다는 React-Query가 더 가볍고, Redux에 종속적이지 않으며 Redux를 사용하지 않는 프로젝트에서도 사용 할 수 있기 때문에 멘토님은 React-Query를 사용하신다고 하셨다. 그래서 나도 범용성이 더 좋다고 생각한 React-Query를 선택하게 되었다.

2. 설치

npm install react-query

3. useQuery

보통 데이터를 가져오는 메서드는 "GET"이다. 하지만 React-Query에서는 useQuery가 그 역할을 대신한다.
(POST, PUT, DELETE의 역할은 Mutate가 처리한다.)

1. useQuery의 옵션

useQuery(queryKey, queryFn?, {
  cacheTime,
  enabled,
  networkMode,
  initialData,
  initialDataUpdatedAt,
  isDataEqual,
  keepPreviousData,
  meta,
  notifyOnChangeProps,
  onError,
  onSettled,
  onSuccess,
  placeholderData,
  queryKeyHashFn,
  refetchInterval,
  refetchIntervalInBackground,
  refetchOnMount,
  refetchOnReconnect,
  refetchOnWindowFocus,
  retry,
  retryOnMount,
  retryDelay,
  select,
  staleTime,
  structuralSharing,
  suspense,
  useErrorBoundary,
})

usequery : 첫번째 인자로는 querykey를 받는다. 이 querykey는 유니크 키값으로써 항목을 고유하게 설명하기 위해 사용한다.

queryFn? : 두번째 인자로는 우리가 사용하는 Fetch,axios의 함수를 받는다.

그 외 옵션 : {} 안에서 사용할 수 있는 유용한 프러퍼티들이 있다.
(onError, onSuccess 등 비동기 요청에 대한 성공 실패를 쉽게 다룰 수 있다)

4. 사용법

나는 게시글 전체를 불러오기 위하여 GET메서드를 사용해야 했기 때문에 usequery 함수를 사용하였다.

먼저 index.tsx에 세팅을 해준다.

1. index.tsx

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


const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      
    },
  },
}); //이곳에서 프로퍼티를 사용하여 기본 세팅을 줄수도 있다.

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
    <GlobalStyle />
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
);

2. App.tsx

import useQuery from "react-query"

export const getAll = async (pageNum: number) => {
  const res = await axios(`${API.posts}/${pageNum}`);
  return res.data.postDataInfo;
};


 const { data, error, isLoading } = useQuery(
    ["dataAll", page],
    () => getAll(page),
    {
      retry: 1,
      refetchOnWindowFocus: false,
    }
  );

// retry는 get 요청이 실패하면 다시 요청하는 횟수이다.(default : 3)
//refetchOnWindowFocus는 다른 페이지를 보고 오거나 홈페이지에 대한 포커스가 사라지고 나타날 때 렌더링이 되는 옵션이다.(default : true)

5. StaleTime? CacheTime?

react-query의 라이플사이클은 "A"라는 유니크 키를 가지고 있는 쿼리를 인스턴스 시키면 네트워크에서 데이터를 가져오고 A라는 쿼리키로 캐싱을 한다.
이 데이터는 fresh 상태에서 staleTime이 지나면 Stale 상태가 된다. Cache는 CacheTime만큼 Cache에 저장되어 있다가 CacheTime이 끝나면 가비지콜렉터로 이동이 된다.
만약 CacheTime이 지나기 전에 A 쿼리 인스턴스가 새롭게 mount되면, fetch가 실행되고 fresh한 값을 가져오는 동안 캐시 데이터를 보여준다.

StaleTime : 데이터가 fresh한 상태에서 stale한 상태로 변경되는 시간(default : 0)

만약 데이터가 변해도 StaleTime이 지나지 않았다면 데이터는 fetch되지 않는다.

CacheTime : 데이터가 inactive인 상태일 때 cache에 저장되어져 있는 시간이다.(default : 5분)

만약 CacheTime이 끝나면 Cache는 가비지콜렉터로 이동이 된다.

cacheTime이 지나기 전에 쿼리 인스턴스가 다시 마운트 되면, 데이터를 fetch하는 동안 캐시 데이터를 보여준다.

cacheTime은 staleTime과 관계없이, 무조건 inactive 된 시점을 기준으로 캐시 데이터 삭제를 결정한다.