Tanstack Query를 이용한 캐시 처리
리액트 쿼리는 응답 데이터를 캐시 처리한다.
즉, 웹사이트에서 데이터를 로드하는 기존 페이지에서 다른 페이지로 이동했다가 다시 돌아오면 데이터가 즉각적으로 표시된다.
useEffect와 커스텀 fetch를 사용한 로직을 이용한 경우 다른 페이지로 이동했다가 다시 돌아오면 새 요청을 전송해서 모든 데이터를 다시 가져오기 때문에 이는 큰 차이가 있다.
리액트 쿼리는 요청을 통해 얻은 응답 데이터를 캐시 처리하고 나중에 동일한 쿼리 키를 가진 다른 useQuery가 실행되면 이 데이터를 재사용한다.
ex. 사용자가 useQuery를 사용하여 데이터를 로드한 페이지에서 다른 페이지로 이동했다가 돌아온 경우
- 리액트 쿼리는 이 쿼리 키가 이전에 이미 사용되었고 이 키의 데이터를 캐시 처리한 것을 확인
↪ 데이터를 새로 로드하지 않고 즉시 제공 - 내부적으로 요청을 다시 전송하여 업데이트 된 내용이 있는지 확인
↪ 자체적으로 데이터를 업데이트
즉각적인 결과와 업데이트 된 데이터가 내부적으로 처리되는 요청을 통해 실현된다.
staleTime
캐시에 데이터가 있을 때 업데이트 된 데이터를 가져오기 위한 요청을 자체적으로 전송하기 전에 기다릴 시간을 설정
기본값인 0을 사용하면 캐시의 데이터를 사용하지만, 업데이트 된 데이터를 가져오기 위한 자체적인 요청을 항상 전송한다.
// 예를 들어 staleTime을 5000으로 설정하면 5000 밀리초 동안 기다린 후에 추가 요청을 보낸다.
const { data, isPending, isError, error } = useQuery({
queryKey: [],
queryFn: fetchEvents,
staleTime: 5000,
});useQuery를 사용한 컴포넌트를 렌더링해서 요청을 전송했는데 5초 안에 다시 컴포넌트를 렌더링하고 동일한 요청을 전송해야 할 경우 staleTime이 5000으로 설정되어 있으면 리액트 쿼리는 요청을 전송하지 않고 5초 이상 기다렸다가 페이지를 다시 이동한 후 돌아오면 요청이 전송된다.
즉,
staleTime을 사용하여 불필요한 요청 전송을 방지할 수 있다.
gcTime
가비지 수집 시간을 의미
gcTime을 사용하여 데이터와 캐시를 얼마나 오랫동안 보관할지를 제어할 수 있다. 기본값은 5분
// gcTime을 30000밀리초로 설정하면 캐시된 데이터가 30초 동안 보관된 후 폐기된다.
const { data, isPending, isError, error } = useQuery({
queryKey: [],
queryFn: fetchEvents,
staleTime: 5000,
gcTime: 30000,
});결론
이러한 기능들을 통해 데이터를 보관하는 기간과 새 요청을 전송하는 시기를 제어할 수 있다.
