React - React Query

프론트엔드는 서버와 데이터 통신을 하면서 서버에 있는 데이터를 가져와서 보여주는 경우가 많다. 이때 네트워크에서 가져온 데이터의 상태를 관리할 수 있게 도와주는 라이브러리로 React Qeury를 많이 사용하고 있다.

React Query 사용 이유

비지니스 로직의 재사용을 위해 React Hooks을 사용하는데 Hooks를 사용하여 상태를 관리하게 되면 Hook을 호출하는 곳마다 네트워크 통신이 발생하게 된다. 이러한 단점을 보완하고자 나온 것이 React Query이다.

React Query 란

정의

React Query(TanStack Query)는 강력한 비동기 상태를 관리해주는 라이브러리로 프론트에서 데이터를 요청하면 React Query가 서버에 데이터를 요청하고 서버에서 받아온 데이터를 캐시(cache)에 저장한 후 캐시에 있는 데이터를 프론트에 보내주는 역할을 한다. 이때 정해진 시간만큼 데이터가 캐시에 저장되는데(시간 조정 가능) 프론트에서 데이터를 요청할 때 요청한 데이터가 캐시에 있는 데이터라면 fetching이 발생하지 않는다.

장점

• Caching
• 오래된 데이터를 알려준다.
• 데이터가 오래되었을 경우 (stale) 백그라운드가 알아서 서버에 업데이트 된 데이터를 받아와 프론트에 보내준다. (invalidateQueries)
• 프로젝트의 구조가 기존에 비해 단순해진다.
• 업데이트 된 데이터를 빨리 반영해준다.
• 같은 데이터를 여러번 요청했을 경우 중복을 제거해준다.

설치

npm i @tanstack/react-query
yarn add @tanstack/react-query

사용법

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

const queryClient = new QueryClient()

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

// 네트워크 통신이 필요한 곳에 useQuery를 사용하여 데이터를 불러오면 된다.
function Example() {
  const { isLoading, error, data } = useQuery({
    queryKey: ['repoData'],
    queryFn: () =>
      fetch('https://api.github.com/repos/tannerlinsley/react-query').then(
        (res) => res.json(),
      ),
  })
}

 


참고 사이트
TanStack Query