쿼리(query) : DB에서 원하는 데이터를 조작하기 위한 언어의 집합. SQL에서 사용한다.
쿼리 캐시(querycache) : TanStack query의 저장 매커니즘이다. 데이터, 메타 정보, 쿼리 상태가 저장된다.
일반적으로 직접 상호작용하지 않고 대신 queryClient 특정 캐시에 사용된다.
서버 상태(server state) : 서버에 요청하고 응답받는 과정에 연결된 데이터
1. fetching : 서버에서 데이터를 받아온다.
2. cashing : 서버에서 받은 데이터를 받아 저장한다. 데이터를 다시 요청할 때 서버에 요청하지 않고 저장한 데이터를 사용한다.
3. synchronizing : 캐시 데이터를 서버와 동일하게 만든다.
4. updating : 서버 데이터의 변경이 용이하다.
리엑트 쿼리(React Query ) : missing된 데이터를 가져오는 웹용 라이브러리. 서버 상태를 다루기 쉽게 만들어준다.
1) stale-while-revalidate(swr) 전략
- 데이터가 오래되면 신선함을 잃는다는 의미로 stale하게 된다고 표현한다.
- 신규 데이터를 요청했으나 새로 도착하기 전이라면 보관하고 있던 오래된 데이터를 먼저 내어준다.
- 신규 데이터가 오면 리랜더링 후 데이터를 건내준다.
2) 캐시 데이터의 보관
- React Context API를 사용하고 있으므로 캐시 Context에 캐시 데이터를 보관한다.
- Redux는 범용적으로 사용되어 사용자가 데이터를 다루는 방법을 설계해야 해서 코드가 길어진다.
- Context API를 사용하면 이 부분을 라이브러리에 맡길 수 있다.
- 데이터는 전역 상태로 관리될 수 있다.
3) 쿼리의 데이터 흐름
(1) 데이터 방향
- 데이터는 QueryClientProvider에서 요청한다.
- 데이터는 Context에서 받는다.
- 데이터는 API 서버에서 줄 수 있다.
(2) 데이터의 흐름
- 처음 데이터를 요청했을 때 Context에 내용이 없으므로 undefined 된다.
- 데이터를 API에 요청하고 Context에서 받는다. 받은 데이터는 swr 전략으로 저장된다.
- Context가 받은 데이터를 Provider에 넘겨준다.
- 같은 Context를 이용하는 다른 컴포넌트는 swr 전략으로 stale 데이터를 먼저 받는다.
- 리랜더링 되면서 데이터가 업데이트 된다.
- 수정을 할 경우 API 서버로 알려준다. (바로 Context로 가는 것이 아니다. 주의한다.)
- API 서버에서 Context로 변경사항을 알려준다.
4) 생애주기(Lifecycle)
(1) 구분
- Active : 현재 화면에서 캐시데이터가 사용되고 있는 경우에 해당된다.
- Inactive : 현재 화면에서 사용되고 있지는 않지만 swr 전략으로 데이터는 저장되어 있다.
- Deleted : Garbage Collector에 의해 데이터가 삭제된다.
(2) 생애주기 흐름
- 데이터를 가져온다(fetching: 가져오는중). 가져온 데이터는 fresh하다.
- staleTime : fresh한 데이터가 stale하게 넘어가는데 걸리는 시간. 0이 기본값이다. 0이면 fresh한 데이터는 없다.
- stale 데이터로 변하면 쿼리를 요청한다. fresh한 데이터는 쿼리를 요청하지 않는다.
- CacheTime : 사용하지 않는 데이터가 삭제될 때 까지의 시간이다. 5분이 기본값이다.
- 사용하지 않는 데이터는 Inactive 공간에서 데이터를 보관하다가 CacheTim이 지나면 Deleted로 간다.
5) 기본 설정 (refetch가 리랜더링 되며 자동 실행)
- refetchOnMount : true, useQuer 또는 useInfiniteQuery가 있는 컴포넌트 마운트 시 refetch가 자동 실행된다.
- 기본적으로 stale한 데이터로 간주하기 때문이다. staleTime을 길게 잡는 것으로 제지가 가능하다. 뒤로가기 등에 해당된다.
- refetchOnWindowFocus : true, 브라우저 화면으로 갈 때마다 refetch가 자동 실행된다.
- refetchOnReconnect : ture, 네트워크가 재연결 되면 refetch가 자동 실행된다.
- retry:3, API 요청이 실패하더라도 3번까지는 시도한다.
6) isLoading과 isFetching
- isLoading은 저장된 데이터조차 없을 때에 해당한다.
- isFetching은 처음 요청, 이후의 요청에도 모두 해당한다.
QueryClient | TanStack Query Docs
tanstack.com