React Query 소개 및 사용하기

 

 

'카카오페이 프런트엔드 개발자들이 React Query를 선택한 이유'라는 재미있는 칼럼을 보게 되었다. 요즘 들어 프런트엔드 진영에서 API통신 후, 데이터 관리를 하는 부분에 대해서 React Query를 많이 이용하는 추세인 것 같다. 최근에 관심이 생긴 React Query를 공부하기 앞서 전반적인 이해도를 키울 겸 해당 칼럼을 보면서 정리하고자 한다. 

 

 

 

시작하기 앞서

 카카오페이에서는 React Query를 도입하기 전에는 Redux를 주로 사용했다고 한다. 리덕스의 장점은 전역상태를 관리하는데 도움 되고, 제공하는 패턴과 도구를 사용하면 애플리케이션의 상태가 언제, 어디서, 왜, 어떻게 업데이트되는지 그리고 이러한 변경이 발생할 때 애플리케이션 로직이 어떻게 작동하는지 더 쉽게 이해할 수 있다는 것이다. 이로 인해, 테스트 및 디버깅에 유리하다.

 

 하지만, 단점으로는 다들 알겠지만 장황한 Boilerplate 코드가 요구된다. 또, 리덕스는 API 통신 및 비동기 상태 관리를 위한 라이브러리가 아니기 때문에 비동기 데이터를 관리하기 위해서는 관련된 코드를 하나부터 열까지 개발자가 결정하고 구현해야 한다고 말하고 있다. 이와 같은 단점 때문에 카카오페이에서는 상태관리를 쉽게 도와주는 React Query를 도입했다고 한다.

 

그렇다면, 최근 핫한 스택인 React Query에 대해 살펴보자.

 

React Query 소개

 React Query는 React Application에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리이다. React Component 내부에서 자연스럽게 서버(또는 비동기적인 요청이 필요한 Source)의 데이터를 사용할 수 있는 방법을 제안한다. 

 

대표적인 장점을 나열한다면 아래와 같다.

1. 캐싱
2. get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행한다. (예를 들면, 게시판의 글을 가져왔을 때 게시판의 글을 생성하면 게시판 글을 get 하는 api를 자동으로 실행한다.)
3. 데이터가 오래되었다고 판단되면 다시 get 한다. 
4. 동일 데이터를 여러 번 요청하면 한 번만 요청한다. (옵션에 따라 중복 호출 허용 시간 조절 가능하다)
5. 무한 스크롤
6. 비동기 과정을 선언적으로 관리할 수 있다.
7. React hook과 사용하는 구조가 비슷하다. 

 

프론트엔드 개발자로서 좋아할 수밖에 없는 기술이다. 기존에 필자는 useEffect안에서 api호출했고, 따로 로딩이라던지 에러에 대한 분기를 해주어야 했었다. 그리고 다시 호출하는 상황 등 여타 다른 상황을 고려하여 추가적인 로직을 구현해야 했었다.

 

하지만, 위의 장점들이 알아서 다해준다니 감동적인 기술이다. 최근에 왜 React Query가 떠오르는지 알 수 있는 내용이다. 

 

React Query 사용하기

설정하기 

react-query 기본 셋팅을 한다. useContext와 비슷하게 provider로 감싸준다.

// src/index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

 

API

 기본적인 API를 소개하고, 예제를 함께 살펴보자.

useQuery

• 데이터를 get 하기 위한 api
• 첫 번째 파라미터로 unique key가 들어가고, 두 번째 파라미터로 비동기 함수(api호출함수)가 들어간다. 
• return 값은 api의 성공, 실패여부, api return 값을 포함하는 객체이다. 
• useQuery는 비동기로 작동한다. 

import { useQuery } from "react-query";

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

if(isLoading) {
  return <span>Loading...</span>
}

// isLoading, isError을 아래와 같이 status로 한번에 처리 가능하다.
const { status, data, error } = useQuery(queryKey, queryFn, options)

if(status === 'loading') {
  return <span>Loading...</span>
}

 

queryKey

• queryKey 를 기반으로 데이터 캐싱을 관리한다.
• 문자열 또는 배열로 지정할 수 있다. 
• 쿼리가 변수에 의존하는 경우에는 queryKey에도 해당 변수를 추가해주어야 한다. 

 

queryFunctions

• useQuery의 두 번째 인자에는 promise를 반환하는 함수를 넣어주어야 한다. 

 

queryOptions

• ReactQuery에 enabled, retry, staleTime 등 많은 쿼리 옵션에 대한 소개가 있지만, useQuery를 동기적으로 사용가능케 하는 옵션 하나만 살펴보자. 가장 많이 쓰일 것 같은 옵션이다. 

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

const { data } = useQuery(
  ['todos', id],
  () => fetchTodoById(id),
  {
    enabled: !!id, //  id가 존재할 때만 쿼리 요청을 한다는 로직이다. 
  }
);

 

useQueries

여러개의 비동기 query가 있을 때 사용한다. promise.all처럼 useQuery를 하나로 묶은 것.

하나의 배열에 각 쿼리에 대한 상태 값이 객체로 들어온다.

const ress = useQueries([
    useQuery1,
    useQuery2,
    useQuery3,
    ...
]);

 

파라미터로 넘어오는 값이 항상 동일하지 않는경우 (dynamic하게 동적으로 변화하는 상황)과 useQuery를 사용하면서 suspense 모드로 동작시킬 때에도 useQueries를 사용해야 한다.

 

QueryCache

쿼리에 대해 성공, 실패 전처리를 할 수 있다.

const queryClient = new QueryClient({
  queryCache: new QueryCache({
    onError: (error, query) => {
      console.log(error, query);
      if (query.state.data !== undefined) {
        toast.error(`에러가 났어요!!: ${error.message}`);
      },
    },
    onSuccess: data => {
      console.log(data)
    }
  })
});

 

useMutation

데이터를 post, update 하기 위한 api

import { useMutation } from "react-query";

const somthingMutation = useMutation(mutationKey,mutationFn, options);

// 사용하기
somthingMutation.mutate()
somthingMutation.MutateAsync() // async await 순서 보장하려면

 

※ update 후에 get 다시 실행

 

1. update후에 그대로 get 을 다시 실행하는 경우

const mutation = useMutation(postTodo, {
  onSuccess: () => {
    // postTodo가 성공하면 todos로 맵핑된 useQuery api 함수를 실행합니다.
    queryClient.invalidateQueries("todos");
  }
});

 

2. update후에 파라미터를 변경하여 get 을 다시 실행해야 하는 경우

const queryClient = useQueryClient();

const mutation = useMutation(editTodo, {
  onSuccess: data => {
    // data가 fetchTodoById로 들어간다
    queryClient.setQueryData(["todo", { id: 5 }], data);
  }
});

const { status, data, error } = useQuery(["todo", { id: 5 }], fetchTodoById);

mutation.mutate({
  id: 5,
  name: "nkh"
});

 

새로운 기술에 대해서는 처음 포스팅해보는데 너무 재밌었고, 값진 시간이였다.

React Query를 관심만 가지다가 자료도 찾아보고, 직접 코드를 쳐보고 맛보기로 학습해보니 놀라웠다. 얼른 실무에서도 사용해보고 싶다. 

 

---

 

아래에 참고한 자료와 도움이 될만한 링크를 걸어두었으니 한번 살펴보면 좋을 것 같아요. 

잘못된 부분이나 보완할 점이 있으면 댓글 달아주시면 감사하겠습니다. 😉

 

 

 

---

 

카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유 | 카카오페이 기술 블로그

[리액트] 리덕스의 장점, 단점

Quick Start | TanStack Query Docs

My구독의 React Query 전환기

react-query 개념 및 정리

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