React Query란

광천·2023년 3월 25일
0

React Query란

서버 상태 가져오기, 캐싱, 동기화 및 업데이트 해준다.

react는 데이터를 가져오거나 업데이트하는 방법을 제공하지 않는다.
기존 상태 관리 라이브러리(redux, recoil) 클라이언트 상태 작업에 적합하지만 비동기 또는 서버 상태 작업에는 적합하지 않습니다. 서버 상태가 완전히 다르기 때문

서버상태

  • 원격으로 유지
  • 데이터 가져오고 업데이트 비동기 api필요
  • 공동으로 사용해서 다른 사람이 변경 할 수 있음
  • 그래서 내가 가지고 있는 데이터가 오래된 데이터 일수 있음

서버 데이터를 가져오고 난뒤 문제

  • 캐싱
  • 동일한 데이터에 대한 여러 요청을 단일 요청으로 중복 제거
  • 오래된 데이터 업데이트
  • 데이터가 오래된 시점 알기
  • 데이터 업데이트를 신속하게 반영
  • 페이지 매김 및 지연 로딩 데이터와 같은 성능 최적화
  • 서버 상태의 메모리 및 가비지 수집 관리
  • 구조적 공유로 쿼리 결과 메모하기

React Query를 사용하면

  • 코드양을 줄일수 있음
  • 새 서버 상태 데이터 소스 연결에 대한 걱정 없이 응용 프로그램을 유지 관리하기 쉽고 새 기능을 쉽게 구축할 수 있습니다.
  • 사용자가 빠르다고 느끼게 해줌
  • 잠재적으로 대역폭을 절약하고 메모리 성능을 높이는 데 도움이 됩니다.
import { QueryClient, QueryClientProvider, useQuery } from 'react-query'

const queryClient = new QueryClient()

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

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

중요 내용

useQuery나 useInfiniteQuery는 캐시된 데이터를 오래된 것으로 간주합니다.
staleTime은 캐시된 데이터가 신선한 시간.

오래된 쿼리는 다음과 같은 경우 백그라운드에서 자동으로 다시 가져옵니다.

  • 쿼리 마운트의 새 인스턴스
  • 창이 다시 초점을 맞춥니다.
  • 네트워크가 다시 연결됩니다.
  • 쿼리는 선택적으로 다시 가져오기 간격으로 구성됩니다.

refetchOnMount, refetchOnWindowFocus, refetchOnReconnect, refetchInterval
이 것 들이 위의 옵션

데이터를 가져오지 못하면 재시도 retry

0개의 댓글