react query 설치
npm install react-query
react query 사용법
- app.js 에서 QueryClient를 생성해 변수에 할당
- QueryClientProvider로 전체를 감싸주고 client값으로 생성한 queryClient를 넣어주면 준비 끝.
컴포넌트 내에서 사용 (useQuery)
- 데이터를 get 해올 때 사용한다.
// useQuery 를 import 해주고
import { useQuery } from "react-query";
// 디스트럭처링으로 data, isError, error, loading 등 상태를 받아와서 사용.
const {data, isError,error, isLoading } = useQuery([querykey값],[query함수])- data = fetch 성공 시 결과 값
- isError = fetch 실패 시
- error = 실패 시 결과값 (메시지)
- isLoading = 로딩 상태
- 더 많은 옵션이 있지만 기본적으로 자주 사용하는 옵션들이다.
React Query Dev Tools
- 개발 중인 모든 쿼리상태를 표시해준다. (문제 해결에 도움)
- 쿼리 키로 쿼리를 표시해주고 활성(active), 비활성(inactive), 만료(stale) 등의 상태를 알려준다.
- 업데이트된 타임스탬프 표시
- 쿼리에 의해 반환된 데이터를 확인할 수 있는 Data explorer, 쿼리를 볼 수 있는 Query explore도 있다.
- ReactQueryDevtools를 불러와 app.js 제일 하단에 넣어준다.
- npm start 시 좌측 하단에 생긴 꽃을 눌러보면
- 쿼리와 Data explorer, Query explore 등 액션을 재실행하거나 삭제할 수 있는 버튼들, 그리고 현재 상태에 대해 나온다.
- 데이터는 항상 만료(stale) 상태를 유지하는데 이는 실수로 만료된 데이터를 제공할 가능성을 줄이기 위해서다.
- stale 상태는 다음의 경우 refetch 된다.
- 새로운 query 인스턴스가 마운트될 때 (useQuery가 처음 호출될 때 등)
- 브라우저 화면을 이탈했다가 다시 포커스할 때 (refetchOnWindowFocus 옵션으로 막을 수 있다.)
- 네트워크가 다시 연결될 때
- 특별히 설정한 refetch interval에 의해서 (refetchInterval)
- staleTime 옵션으로 설정한 시간 동안 데이터가 stale 되지 않도록 해 refetch를 막을 수도 있다. (기본값은 0)
- 쿼리에 별다른 액션이 없다면 inactive 상태로 캐시에 남아 있다가 5분 뒤에 메모리에서 사라진다. ( cacheTime 옵션으로 변경가능 기본값은 5분이다.)
