React Query란?

Hong·2022년 2월 25일

React-Query는 React앱에서 비동기 로직을 쉽게 다루게 해주는 라이브러리이다.

QueryClientProvider

리액트 쿼리를 사용하려면 <QueryClientProvider> 를 App.js 최상단에 추가한다.
쿼리 인스턴스를 생성 후 client={queryClient} 작성해준다.

useQuery를 이용해 데이터 가져오기

const { data, isLoading, error } = useQuery(queryKey, queryFn, options)

data: 서버 요청에 대한 데이터
isLoading: 캐시가 없는 상태에서 데이터를 요청 중인 상태
isError: 서버 요청 실패에 대한 상태
error: 서버 요청 실패

QueryKey

QueryKey 를 기반으로 데이터 캐싱을 관리하며 문자열 또는 배열로 지정한다.

useQuery('example', ...)
useQuery(['example', ...], ...)

Query Functions

useQuery 두번째 인자로 Promise를 리턴하는 함수

Query Options

세번째 인자로는 useQuery 옵션이 들어간다.

enabled (boolean)

enabled 는 쿼리가 자동으로 실행되지 않게 설정하는 옵션이다.

아래의 코드는 id가 존재할 때만 쿼리 요청을 한다는 의미의 코드이다.
const { data } = useQuery(
  ['todos', id],
  () => fetchTodoById(id),
  {
    enabled: !!id,
  }
);
retry (boolean | number | (failureCount: number, error: TError) => boolean)

retry 는 실패한 쿼리를 재시도하는 옵션이다.

기본적으로 쿼리 실패시 3번 재시도 한다.

true 로 설정하면 쿼리 실패시 무한 재시도하고 false로 설정하면 재시도를 하지 않는다.

staleTime (number | Infinity)

staleTime 은 데이터가 fresh 상태로 유지되는 시간이다. 해당 시간이 지나면 stale 상태가 된다.

default staleTime은 0 이다.

fresh 상태에서는 쿼리가 다시 mount 되어도 fetch가 실행되지 않는다.

cacheTime (number | Infinity)

cacheTime 은 inactive 상태인 캐시 데이터가 메모리에 남아있는 시간이다. 이 시간이 지나면 캐시 데이터는 가비지 컬렉터에 의해 메모리에서 제거된다.

default cacheTime 은 5분이다.

refetchOnMount (boolean | "always")

refetchOnMount 는 데이터가 stale 상태일 경우 마운트 시 마다 refetch를 실행하는 옵션이다.

default true

always 로 설정하면 마운트 시 마다 매번 refetch 를 실행한다.

refetchOnWindowFocus (boolean | "always")

refetchOnWindowFocus 는 데이터가 stale 상태일 경우 윈도우 포커싱 될 때 마다 refetch를 실행하는 옵션이다.

예를 들어, 크롬에서 다른 탭을 눌렀다가 다시 원래 보던 중인 탭을 눌렀을 때도 이 경우에 해당한다. 심지어 F12로 개발자 도구 창을 켜서 네트워크 탭이든, 콘솔 탭이든 개발자 도구 창에서 놀다가 페이지 내부를 다시 클릭했을 때도 이 경우에 해당한다.

default true

always 로 설정하면 항상 윈도우 포커싱 될 때 마다 refetch를 실행한다는 의미이다.