[React] React Query v5 (TanStack Query)

TanStack Query ?

TanStack Query(FKA React Query)는 종종 웹 애플리케이션용 누락된 데이터 가져오기 라이브러리로 설명되지만, 좀 더 기술적인 용어로 말하면 웹 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 매우 쉽게 만듭니다.

1. 리액트 공식 문서에서는 데이터를 fetch 해올 때 useEffect를 사용하는 방식을 권장하지 않는다.
2. React-Query를 사용하면 커스텀훅을 사용하여 HTTP통신을 할 때 보다 로딩, 에러, 캐싱 등 다양한 기능을 간단히 구현할 수 있다. ( 기본적으로 내장되어 있음 )
3. 캐싱기능을 구현하여 fetch를 줄일 수 있다. ( 성능향상 )

React-Query 사용법

• App.js

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


export default const queryClient = new QueryClient() 

export default function App() {
  return (
    <QueryClientProvider client={queryClient}> // QueryClientProvider 로 client를 지정하여 감싸기
      <Main />
    </QueryClientProvider>
  )
}

• QueryClientProvider : 구성 요소를 사용하여 애플리케이션에 QueryClientProvider와 연결한다. (client : QueryClient 필수적 요소)
• QueryClient : 캐시와 상호작용을 하는데에 사용된다.

• Main.jsx

import { useQuery } from "@tanstack/react-query";


function Main() {
  const { isLoading, error, data } = useQuery({
    queryKey: ['repoData'], // 키값 지정 (식별자)
    queryFn: () => // HTTP 요청 함수
      fetch('https://api.github.com/repos/TanStack/query').then((res) =>
        res.json(),
      ),
    staleTime: 1000 * 60 * 5, // ✅ 최신상태로 5분동안 유지시킬게 -> 새롭게 서버에서 데이터를 호출하지 않고 캐싱된 데이터를 받아옴
  })

  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>
  )
}

• staleTime : 최신상태로 이 시간동안 유지시킬게
  ➡️ 새롭게 서버에서 데이터를 호출하지 않고 캐싱된 데이터를 받아옴

devTool

• devTool을 활용하여 현재 데이터의 상태를 눈으로 확인할 수 있어서 더욱 편리했다 👍🏻

설치 방법

$ npm i @tanstack/react-query-devtools
# or
$ pnpm add @tanstack/react-query-devtools
# or
$ yarn add @tanstack/react-query-devtools
# or
$ bun add @tanstack/react-query-devtools

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

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Main/>
      <ReactQueryDevtools initialIsOpen={false} /> // 기본적으로 개발자도구를 열려있도록 하려면 true로 설정
    </QueryClientProvider>
  )
}

느낀점

커스텀 훅을 사용하여 HTTP통신을 했다가 React-Query를 사용하여 통신해보니 확실히 간단하고 캐시의 중요성을 알 수 있게 되었다.
평소에 웹 최적화에 대해 관심이 많이 생겼었는데 , 확실히 React-query를 사용하니 fetch 횟수도 줄어들고, 또 하나의 최적화 방법을 배울 수 있게 되어서 앞으로 많이 활용할 것 같다 🔥🔥🔥

참고문서 : TanStack 공식사이트