리액트 쿼리, staleTime

리액트 쿼리란

클라이언트에서 서버 데이터가 필요할 때, fetch나 axios를 사용하지 않고 리액트 쿼리 캐시를 요청할 수 있다. 즉, 리액트 쿼리는 해당 캐시의 데이터를 유지 관리하는 것이다. 데이터 관리는 리액트 쿼리가 하지만 새 데이터로 캐시를 업데이트하는 시기를 개발자가 설정할 수 있다.

 

클라이언트 캐시에 있는 데이터가 서버 데이터와 일치하는지 확인하는 방법은 2가지가 있다.

1. 명령형: 쿼리 클라이언트에 기존에 있던 데이터를 무시하고 새 데이터를 서버에서 가져와 교체하는 것

2. 선언형: 예를 들어 브라우저 창을 다시 포커스 하면 refetch하는 트리거 조건을 구성한다. 혹은 시간을 설정하여 그 시간이 지나면 다시 데이터를 불러올 수 있게 할 수 있다.

 

리액트 쿼리는 서버에 대한 모든 쿼리(로딩, 오류 상태 등)을 유지해줘서 수동으로 설정할 필요가 없다. 그리고 페이지네이션이나 무한 스크롤에 대한 필요한 도구도 제공해준다. 또한 사용자가 필요할 데이터를 예측하여 프리패칭하여 미리 데이터를 넣어줄 수 있다. 또한 중복 요청을 제거할 수 있다. 그리고 만약 서버에서 오류가 나면 자동으로 요청을 다시 보내준다. 이 자동 요청은 설정에 따라 다르지만 기본은 3번을 보낸다.

stale Data과 staleTime

stale Data는 만료된 데이터라는 의미이다. 리액트 쿼리에서 데이터 refetching은 만료된 데이터에서만 실행된다. 데이터 refetching에는 만료된 데이터 외에도 여러 트리거(컴포넌트가 다시 마운트, 윈도우가 다시 포커스 등)가 있다.

  const { data, isLoading, error, isError } = useQuery("posts", fetchPosts, {
    staleTime: 2000,
  });

staleTime은 데이터가 유효한 최대 시간이라고 할 수 있다. 위 코드처럼 staleTime을 설정할 수 있다.

staleTime이 2초라서 그 2초 동안은 data가 fresh 상태이다. 그리고 2초가 지나면 stale 상태가 되어 데이터가 만료된다. 

staleTime의 기본 값은 0이며 이 이유는 "어떻게 데이터를 항상 최신으로 유지할까?"라는 생각이 필요하다. 즉 staleTime이 0이면 데이터는 항상 만료된 상태여서 서버에서 다시 가져와야 한다.

staleTime vs cacheTime

staleTime: refecthing 할 때 고려하는 사항이다. 캐시는 나중에 다시 필요할 수도 있는 데이터용이다. default 값은 0

cacheTime: 데이터가 inactive 상태일 때 캐싱된 상태로 남아있는 시간이며 캐시가 만료되면 가비지 컬렉션이 실행되고 클라이언트는 데이터를 사용할 수 없다. 데이터가 캐시에 있는 동안은 fetching 할 때 사용될 수 있다. default 값은 5분