[React-Query] React-Query(리액트 쿼리)란?

React Query

리액트쿼리는 클라이언트에서 서버 데이터 캐시를 관리하는 것으로 리액트 코드에서 서버데이터가 필요할 때 Fetch나 Axios를 사용하지 않고 React Query 캐시를 요청한다

역할

• 데이터를 관리 (서버의 새 데이터를 업데이트 설정은 사용자 몫)
  • 서버에 데이터 일치하는지 확인
    • 명령형 : 쿼리 클라이언트에 있는 데이터 무시 후 캐시에 교체할 새 데이터를 서버에서 가져오게 지시
    • 선언형: 리패치를 트리거하는 조건을 구성
• 서버 상태 관리에 도움이 되는 많은 툴 제공
  • 서버에 대한 모든 쿼리의 로딩 및 오류 상태 유지
  • 사용자를 위해 페이지네이션 무한 스크롤이 필요한 경우 데이터 조각을 가져올 수 있는 도구 제공
  • 사용자가 언제 필요할지 미리 예상한 후 프리패치
  • 데이터의 변이나 업데이트 관리
  • 쿼리는 키로 식별되므로 리액트 쿼리는 요청을 관리하고 페이지를 로드하고 해당 페이지의 여러 구성 요소가 동일 데이터 요청 경우 리액트 쿼리는 쿼리를 한 번에 보낼 수 있음
  • 서버에서 오류가 발생하는 경우 재시도 관리
  • 쿼리 성공하거나 오류 났을 때 구별 후 콜백을 전달할 수 있음

staleTime vs gcTime

staleTime

stale이란 오래된 데이터이지만 캐시에는 있는 경우로 `refetch`의 기준이라고 할 수 있다.

reactQuery에서 `staleTime`은 기본이 0인데

그 이유로 리액트쿼리 개발자가 아래처럼 주장했기 때문이다.

데이터는 늘 새 것이어야 한다.

정리하자면 데이터를 가져와야 할 시간을 알려주는 것이 `staleTime`이다.

gcTime

데이터를 캐시에서 유지할 시간 설정으로 gcTime이 지나면 데이터는 캐시에서 사라진다.

기본 gcTime은 5분으로 데이터가 페이지에 표시될 때는 측정되지 않는다.

리액트쿼리 훅의 반환값

isLoding

isFetching의 하위 작업으로, 로딩 중을 뜻한다.

쿼리 함수가 아직 미해결이지만 캐시된 데이터도 없다는 것을 뜻한다. (쿼리를 전에 실행한 적이 없음)

isFetching

비동기 쿼리가 아직 해결되지 않았다는 것이다.

아직 fetch는 완료되지 않았지만 Axios 호출이나 GraphQL 호출 같은 다른 종류 데이터 가져오는 작업이다.

isError

요청이 실패했는지 여부를 나타내는 bool값이다.

요청이 실패했을 때 true로 설정된다.

error

요청이 실패했을 때 발생한 에러 객체를 포함한다.

에러의 구체적인 정보를 확인할 수 있다.

ReactQueryDevtools

리액트쿼리 전용 개발자 도구로 아래와 같이 설치 및 사용한다.

$ 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'