[React Query] 리액트 쿼리 시작하기 (useQuery)

김효선·2021년 11월 22일

React Query 사용기

목록 보기

1/5

React Query

리액트 쿼리!
리액트에서 비동기 로직을 리액트스럽게 다룰 수 있게 해주는 라이브러리이다.
server state를 아주 효율적으로 관리할 수 있다.
기존에 isLoading, isError, refetch, 데이터 캐싱 등 개발자가 직접 구현하려면 꽤 귀찮거나 까다로웠던 기능을 제공해준다.
이번 편에서는 간단하게 기본적인 사용 방법에 대해 작성하려한다.

QueryClientProvider

리액트 쿼리 사용을 위해 QueryClientProvider 를 최상단에서 감싸주어야한다.
쿼리 인스턴스를 생성 후 client={queryClient} 작성해준다.

기본 셋팅

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

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Home />
    </QueryClientProvider>
  );
}

useQuery

import { useQuery } from "react-query";
// 주로 사용되는 3가지 return 값 외에도 더 많은 return 값들이 있다. 
const { data, isLoading, error } = useQuery(queryKey, queryFn, options)

QueryKey

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

// 문자열
useQuery('todos', ...)
// 배열
useQuery(['todos'], ...)

쿼리가 변수에 의존하는 경우에는 QueryKey 에도 해당 변수를 추가해주어야한다.

const { data, isLoading, error } = useQuery(['todos', id], () => axios.get(`http://.../${id}`));

Query Functions

useQuery 의 두번째 인자에는 promise 를 반환하는 함수를 넣어주어야한다.
거의 첫번째나 두번째 방식으로 코드를 작성하고 있다.

 useQuery('todos', fetchTodos);
 useQuery(['todos', todoId], () => fetchTodoById(todoId));
 useQuery(['todos', todoId], async () => {
   const data = await fetchTodoById(todoId);
   return data
 });
 useQuery(['todos', todoId], ({ queryKey }) => fetchTodoById(queryKey[1]));

Query Options

리액트 쿼리 공식 문서에 많은 쿼리 옵션에 대한 소개가 있지만 개인적으로 자주 쓰이는 것만 다뤄보겠다.

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를 실행한다는 의미이다.

예제 코드!

// 유저 정보를 가져오는 쿼리이다.
const { data: userInfo } = useQuery(
  ['user'],
  getUser,
  {
    refetchOnWindowFocus: true,
    staleTime: 60 * 1000, // 1분
  }
)

QueryClient defaultOptions 설정으로 refetch 기능들을 다 false로 꺼버렸을 경우에는 refetch 기능이 실행되지 않는다. 그럴 경우엔 refetchOnWindowFocus 옵션이 실행되게끔 true로 설정하면 된다.
fresh 상태인 1분 동안은 아무리 다른 탭을 왔다갔다해도 fetch 요청을 하지 않는다.

refetchOnReconnect (boolean | "always")

refetchOnReconnect 는 데이터가 stale 상태일 경우 재 연결 될 때 refetch를 실행하는 옵션이다.
default true
always 도 위에 두 옵션 처럼 쿼리가 매번 재 연결될 때 마다 refetch를 실행한다.

onSuccess ((data: TDdata) => void)

onSuccess 는 쿼리 성공 시 실행되는 함수이다.
매개변수 data는 성공 시 서버에서 넘어오는 response 값이다.

onError ((error: TError) => void)

onError 는 쿼리 실패 시 실행되는 함수이다.
매개변수로 에러 값을 받을 수 있다.