React-Query 공식문서의 최신 버전(v5)에 대한 설치 방법입니다.
React-Query를 사용하기 위해서는 QueryClient 와 QueryClientProvider 를 사용하여
전역으로 상태를 관리하는 코드를 작성해야 합니다.
QueryClient
일반적으로 애플리케이션의 최상위에서 QueryClient를 생성합니다.
QueryClient 는 캐시와 상호 작용하는데 사용할 수 있습니다.
QueryClientProvider
React 애플리케이션에서 QueryClient를 사용할 수 있도록 하는 컴포넌트입니다.
애플리케이션의 최상위에서 한 번만 렌더링 되어야 합니다.
prop을 통해 QueryClient 인스턴스를 전달하여 하위 컴포넌트에서 Reacy-Query를 사용할 수 있도록 합니다.
useQuery
React-Query 라이브러리에서 제공되는 hook 입니다.
데이터를 가져오는데 사용됩니다.
비동기적으로 데이터를 가져오고 관리하는 데 사용됩니다.
queryKey 와 queryFn 정의가 필수적 입니다.
queryKey
공식문서에서의 queryKey 설명입니다.
핵심은 queryKey 를 기반으로 쿼리 캐싱을 관리하는 것 입니다.
queryFn
promise를 반환하는 함수,
promise는 데이터를 해결하거나 오류를 발생시켜야 한다고 합니다.
useQuery를 사용해 데이터를 조회
Options
몇가지 옵션에대해 알아보겠습니다.
1. enabled : boolean
마운트시 쿼리가 자동으로 실행되지 않도록 합니다.
종속 쿼리에 사용 할 수 있습니다.
2. retry : boolean | number | (failureCount : number , error : TError) => boolean
false로 설정 되어있다면 실패한 쿼리요청을 재시도 하지 않습니다.
true 라면, 무한히 재시도 합니다.
number로 설정되는 경우 해당 number만큼 재시도 합니다.
기본값은 number 인 3입니다.
함수로 설정될 수 있는데, 이 함수는 failureCount 와 error 를 매개변수로 받아서 재시도 여부를 결정합니다.
3. staleTime : number | Infinity
기본값은 0 이고 단위는 ms 입니다.
number로 지정한경우 해당 시간동안 fresh상태, 그 후엔 오래된데이터(stale)상태 로 간주합니다.
useQuery의 staleTime을 3초로 설정했습니다.
Home Page 에서는 지속적으로 네트워크 요청을 보내지만,
staleTime을 3초로 설정한 Test Page에서는 데이터가 3초 동안 캐싱되어 있어,
네트워크요청을 다시 보내지 않습니다.
4. refetchOnMount : boolean | "always" | ((query : Query) => boolean | "always")
기본값은 true 입니다.
true로 설정한다면, 마운트 시 데이터가 stale상태일 경우 refetch 합니다.
false로 설정한다면, 마운트 시 refetch 하지 않습니다.
"always"로 설정한다면, 마운트 시 항상 refetch 합니다.
5. refetchOnWindowFocus : boolean | "always" | ((query : Query) => boolean | "always")
refetchOnMount와 설정이 동일하지만,
차이점은 refetchOnWindowFocus 옵션은 마운트되는 시점이 아닌 윈도우 포커싱에 따라 동작합니다.
useQuery의 단편적인 부분에 대해 알아봤습니다.
여러가지 옵션을 효과적으로 사용하기 위해 디테일한 공부가 더 필요해보입니다.
'React-Query' 카테고리의 다른 글
| React-Query 사용이유 ? (0) | 2023.11.15 |
|---|