# 14 리액트 쿼리(with TanStack Query)

2023.04.15

TanStack Query

✔ 네트워크에서 가져온 데이터를 상태관리 할 수 있게 도와주는 라이브러리 중 가장 많이 쓰임

https://tanstack.com/query/latest

1. 커스텀 훅의 문제점

1. 캐시가 되지 않는다. -> 훅을 호출할 때 마다 새롭게 데이터를 계속 받아옴
2. retry 기능이 없다.

=> React Query가 이 문제점들을 해결!

2. React Query 예시

import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from '@tanstack/react-query'

const queryClient = new QueryClient()

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

function Example() {
  const { isLoading, error, data } = useQuery({
    queryKey: ['repoData'],
    queryFn: () =>
      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>
  )
}

3. Query Keys

1. 키는 배열로 설정
2. 키가 같으면 동일한 캐시 데이터 사용

4. 개발툴 설치

1. 설치

yarn add @tanstack/react-query-devtools

2. 예시

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

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

5. important default 확인

캐시와 stale