Tanstack Query (React Query)의 useQuery에 대해서 알아보자
Tanstack Query를 이용해서 어떤 걸 기대할 수 있을까?
이 라이브러리는 비동기 상태 관리를 더욱 효율적으로 할 수 있게 도와준다. 이는 서버의 상태, 데이터 캐싱, 동기화 및 업데이트를 효과적으로 다룰 수 있게 해준다.
간단하게 몇 가지 기능을 말해보자면
- 데이터 패치와 캐싱
- 실시간에 가까운 데이터를 유지하게 하는 백그라운드 데이터 동기화
- 데이터간 의존성이 다르며 이에 기반한 데이터 업데이트
- 페이지네이션
- 로딩, 에러 등 서버 상태 받기
등 여러 가지 기능이 있다.
이 글에서는 useQuery에 대해서 알아볼 것이기 때문에, 사용하는 법에 대한 설명은 스킵 (공식 문서 확인하면서 적용해보기)
이 Tanstack Query은 여러가지 훅이 있는데, 오늘 나는 기본적으로 데이터를 조회(패치)하고 캐싱하는데 사용되는 useQuery에 대해 공부해보겠다.
이게 공식 문서에서 가져온 useQuery를 사용할 때 쓰는 인자와 그의 값들이다 (굉장히 많고 길다..)
useQuery는 하나의 객체를 인자로 받고, 그 인자는 위에서 보이듯이 하나의 객체이다. 그 객체 안에는 굉장히 다양한 키들이 있다.
여기서 queryKey와 queryFn은 필수!(required)로 기입을 해줘야한다.
queryKey는 데이터는 식별하는 키다. 값은 배열[] 로 넘겨줘야 한다. 배열에 여러가지 값들을 넣어줄 수 있지만 기본적으로 데이터를 식별하는 키를 문자열로 넣어주고, 그 다음으로는 데이터를 새로 업데이트 해야 하는 변수를 넣어준다.
이 변수가 바뀔 때마다, 이 쿼리는 새로 실행된다.
queryFn은 Promise를 반환하는 함수를 값으로 넣어줘야 한다. 이는 API 요청을 하는 함수를 나타내며, axios 요청을 이 함수 내에서 한다는 것이다.
나는 대부분 함수를 따로 만들어서 함수명을 넣어준다 :)
그 다음에는, staleTime과 gcTime을 설정해줄 수가 있는데 staleTime의 기본적인 시간은 0이고 gcTime은 5분이다.
(staleTime을 지정해주지 않으면, 마운트(mount)가 될 때마다 서버로 매번 요청을 하게 되니 조심!)
staleTime은 "신선한" 상태를 유지하는 데이터 시간을 의미한다. 쿼리가 실행되고 나면 gcTime동안 데이터가 메모리에 캐시되는데, 이 캐시된 데이터의 신선한 시간을 말하는 것이다. 더이상 신선하지 않게 되면, 다시 서버에 재요청을 하게 된다.
gcTime은 전에 cacheTime이었으나 이름이 gc(garbage colletor)를 따서 gcTime으로 변경되었다. 이는 데이터가 가비지 컬렉터로 인해 삭제 되기 전까지의 시간 즉, 메모리에 캐시된 데이터가 삭제되기 전까지의 유효 시간을 뜻한다.
그래서 현재의 데이터가 "신선"하고 캐시된 데이터가 있으면, 같은 쿼리에 대해 재요청을 하지 않고 캐시된 데이터를 보여준다. 만약, staleTime이 지났고 gcTime이 남아있으면 서버에 재요청을 하지만 캐시되어 있던 데이터를 먼저 보여주고 비동기로 서버 데이터를 새로 가져와 보여준다.
gcTime이 지나면, 캐시된 데이터를 보여주는게 아니라 아예 새로 서버로 데이터 요청을 보내게 되는 것이다.
(이들의 시간은 millisecond로 정의 해줘야 함!)
그래서 간단한 useQuery의 예시는 아래이다.
이외에도, enabled는 종속 쿼리를 구현할 수 있게 해주고, refetchOnMount는 boolean, always가 있으며 기본적으로 true이다. 이는 mount가 되었을 때 data가 stale 상태이면 데이터 요청을 하게 하고, always일 때는 stale 하지 않더라도 매번 요청을 보내게 한다.
onSucess, onError, onSettled는 v5부터 useQuery에서는 사용할 수가 없게 되었다.(useMutation에서는 사용 가능하다!)
사용할 수 있는 키들을 모두 설명하려면 너무 긴 글이 될 듯하여 공식 문서의 설명을 확인하는 것을 추천한다!
useQuery 공식 문서: https://tanstack.com/query/latest/docs/framework/react/reference/useQuery
또 깃헙에 Tanstack Query를 굉장히 친절하고 알기 쉽게 설명해주는 좋은 글이 있어 함께 올려본다
https://github.com/ssi02014/react-query-tutorial?tab=readme-ov-file#%EA%B0%9C%EC%9A%94
