주니어 프론트엔드 개발자의 React 환경에서 TanStack Query 첫 사용기

 

 

 

 

부트캠프 마지막 과정은 리액트 프로젝트였다.

기본적인 SNS 서비스에 대한 API를 제공받은 후 디자인, 아키텍처, 라이브러리 사용까지 모두 자유 주제로 진행했던 프로젝트에서 TanStack Query를 사용하면서 느꼈던 어려움과 장점과 단점 등 주니어 개발자로서 겪었던 경험을 기록해 보고자 한다. 우선 해당 게시물에서는 API를 호출하는 핵심 기능인 useQuery와 useMutation에 대해서 작성하고, 쿼리 업데이트를 하기위한 부가 기능과, 무한 스크롤, 에러바운더리에 대한 부가 기능은 이어서 작성해보고자 한다.

 

 

 1️⃣ TanStack Query란?

 

TanStack Query는 서버 데이터와의 동기화 및 업데이트하는 작업을 편하게 할 수 있도록 도와주는 역할을 하며, 비동기 처리 로직을 간결하게 줄여준다. 주요 기능으로는 get, post, put 등 메서드를 활용한 데이터 가져오기, 업데이트, 캐싱, 로딩, 에러 처리가 있다.

 

React Query라는 이름으로 더 유명한 TanStack Query는 v3 까지는 React만 지원했는데, v4부터 React를 포함해서 Vue, Svelte, Solid 에서도 사용이 가능해지면서 TanStack Query로 이름이 변경되었다. 여전히 TanStack Query라는 명칭보다는 React Query라고 지칭되는 경우가 많다.

 

TanStack Query 의 핵심기능으로는 HTTP의 GET요청과 같이 서버 데이터를 가져오는 useQuery 훅이 있고, POST, PUT, DELETE 요청 등 변이(사이드이펙트)를 유발하는 useMutation 훅이 있다. 

 

 

 

 2️⃣ TanStack Query의 장단점

 

장점

• 동일한 요청을 동시에 여러번 보내도 자동으로 데이터 요청을 한 번만 보내서 메모리에 캐시 하므로 동일한 데이터에 대한 후속 호출로 인한 중복 요청이 발생하지 않아서 효율적이고 간편하다.
• 데이터 캐싱 기능을 이용하기 위해 Refetch가 일어나는 조건을 다양하게 제공한다. 윈도우에 포커스(refetchOnWindowFocus)된 경우, 마운트(refetchOnMount) 되는 경우, 재 연결(refetchOnReconnect)되는 경우 세 가지가 있다.
• 데이터 가져오는 로직이 심플해지고 데이터 업데이트가 신속하게 반영된다.
• 페이지네이션, 무한 스크롤, 데이터 지연 로딩과 같은 기능이 내장되어 있어서 성능 최적화하기 좋다.
• Devtool이 내장되어 있어서 네트워킹 되는 데이터를 확인할 수 있어서 디버깅에 용이하다.

 

단점

• 구글링, gpt(^^;)를 참고하는 경우 사용중인 버전과 일치하는 정보인지 꼭! 확인해야 한다. 대부분의 자료가 이전 버전 자료이기 때문에 tanstack 버전인지 꼭 확인하는 것이 중요하고, 되도록 공식문서를 참고해서 개발하는 것이 좋다.
• 아직 리덕스, 리덕스 툴킷만큼 보편성을 갖고있지는 않기 때문에 상대적으로 참고할만한 자료가 부족한 편이다. 그러나 주니어 개발자에게는 리덕스보다 훨씬 다루기 쉽기 때문에 활용해 보는 것을 추천한다.

 

 

 

 3️⃣ 설치 및 초기 세팅

 

TanStack Query 설치

// npm
npm i @tanstack/react-query 

// yarn
$ yarn add react-query

 

app.js 초기 설정

• QueryClientProvider 컴포넌트를 최상단에 감싸고 QueryClient 인스턴스를 client 속성에 넣어준다.

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

const queryClient = new QueryClient()

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

 

 

 

4️⃣ useQuery

• GET요청과 같은 CREAT작업을 할때 사용되는 훅으로 쿼리키(queryKey)와 쿼리함수(queryFn)를 필수로 선언해 줘야 한다. 응답은 data, 에러는 error, 쿼리 상태를 담고 있는 status 등을 반환.
• const requestData = useQuery(queryKey, queryFn, Option) 형태로 구성.
• useQueries와 useInfiniteQuery 훅은 useQuery와 마찬가지로 서버에서 데이터를 가져올 때 사용한다. 여러 데이터를 병렬로 가져와야 할 때는 useQueries 훅을, 무한 스크롤과 같이 계속해서 데이터를 가져와야 할 경우 useInfiniteQuery 훅을 사용.
• 쿼리키(queryFn)가 다르면 호출하는 API가 동일해도 캐싱을 별도로 관리한다. Devtool에서도 쿼리키를 인식해서 디버깅하기 때문에 매우 중요!

function Example() {
  const { isLoading, error, data } = useQuery('repoData', () =>
    fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res =>
      res.json()
    )
  )

  if (isLoading) return 'Loading...'

  if (error) return 'An error has occurred: ' + error.message

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{' '}
      <strong>✨ {data.stargazers_count}</strong>{' '}
      <strong>🍴 {data.forks_count}</strong>
    </div>
  )
}

 

• 데이터 요청

data	status ==='success' 서버 요청에 대한 데이터가 성공적으로 응답된 상태.
isLoading	status === 'loading' 쿼리에 데이터가 없으며 현재 가져오는 중인 상태.
isError	status === 'error' 쿼리에 오류가 발생한 상태.
isFetching	true / false 쿼리에 데이터 유무와 상관 없이 현재 가져오는 중인 상태.
error	object 서버 요청 실패에 대한 응답.

 

• 옵션

cacheTime	unMount 이후 메모리에 언제까지 데이터를 저장해서 캐싱할 건지 설정 기본 300000 (5분)
staleTime	stale(신선하지 않은) 데이터를 패치해서 언제 새롭게 갱신할지 설정 기본 0
refetchOnMount	컴포넌트 마운트시 새로운 데이터 패칭 기본 true
refetchOnWindowFocus	브라우저가 포커스 될 때마다 데이터를 새롭게 패치 기본 true
refetchInterval	브라우저에 포커스가 있을 때 지정한 시간 간격만큼 데이터 패칭 기본 0
refetchIntervalInBackground	브라우저에 포커스가 없어도 지정한 시간 간격만큼 데이터 패칭 기본 false

 

💡cacheTime과 StaleTime, 언제 조정하면 좋을까?

• StaleTime은 기본 값이 0이므로 응답 즉시의 데이터를 반환한다. 만약 사용하는 데이터의 변경이 자주 일어나지 않는경우 값을 조정하면 불필요한 API 호출을 줄일 수 있다는 장점이 있다.
• 예를 들어 유저 한 명의 데이터를 관리한다면 staleTime을 infinity로 설정해서 불필요한 요청을 방지하고 POST, PUT, DELETE 등 변이를 발생시키는 메서드가 실행될 때만 쿼리 무효화를 통해 데이터를 갱신시키는 방법이 있다.

 

 

 

5️⃣ useMutation

• POST, PUT, DELETE와 같은 변경 및 수정작업을 서버에 업데이트할 때 사용하는 훅이다.
• mutate 메서드를 사용해서 콜백을 통한 트리거 이벤트를 발생시킨다.
• const requestData = useMutation(API, mutationFn); 형식으로 구성.
• quaryFn과 다르게 기본 값으로 설정해 둔 mutationFn이 있다면 생략할 수 있다.
• useQuery와 동일하게 응답 데이터는 data, 에러 정보는 error 객체로, 쿼리 상태는 status 로 반환한다.

 

function Example() {
  const mutation = useMutation(newTodo => {
    return axios.post('/todos', newTodo)
  })

  return (
    <div>
      {mutation.isLoading ? (
        'Adding todo...'
      ) : (
        <>
          {mutation.isError ? (
            <div>An error occurred: {mutation.error.message}</div>
          ) : null}

          {mutation.isSuccess ? <div>Todo added!</div> : null}

          <button
            onClick={() => {
              mutation.mutate({ id: new Date(), title: 'Do Laundry' })
            }}
          >
            Create Todo
          </button>
        </>
      )}
    </div>
  )
}

useMutation(exampleMutation, {
   onMutate: (variables) => {
     // mutate 함수가 실행되기 전에 실행할 내용
     console.log(variables) // exampleMutation에 들어가는 Arguments
   },
   onSuccess: (data, variables) => {
     // 성공시 실행할 내용
   },
   onError: (error, variables) => {
     // 에러시 실행할 내용
   },
   onSettled: (data, error, variables, context) => {
     // 성공 or 에러 상관 없이 실행할 내용
   },
 })

 

 

 

6️⃣ devtools

• devtools는 TanStack Query를 설치하면 자동으로 설치되고, 별다른 설정 없이 QueryClientProvider 범위 내에 ReactQueryDevtools를 선언하면 된다.
• 각 쿼리키에 대한 데이터의 상태를 쉽게 확인할 수 있다.
• devtool에 대한 자세한 공식문서 설명은 여기를 참고!

 

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

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* The rest of your application */}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  )
}

 

 

 

 

👩🏻‍💻 결론

• TanStack Query는 앞서 언급했던 쿼리들 말고도 다양한 쿼리를 제공하고 훨씬 다양한 기능이 있다.
• 무엇보다 비동기(API 호출 등) 작업에 최적화되어있는 TanStack Query를 사용할 때에는 버전에 유의하여 참고 자료를 활용하는 게 중요하고 공식문서를 활용하는 게 좋다.
• TanStack Query 의 핵심기능으로는 HTTP의 GET요청과 같이 서버 데이터를 가져오는 useQuery 훅이 있고, POST, PUT, DELETE 요청 등 변이(사이드이펙트)를 유발하는 useMutation훅이 있다.