useQuery에서 staleTime과 keepPreviousData 차이

 

 

 

const { data: queryData, isLoading } = useGetAlbums();

const fetch = () => {

  return customAxios.get<Studio>('api/albums/');

};

 

function useGetAlbums(){

  const query = useQuery('useAbums', fetch(),{

  //  keepPreviousData: true,

});

  return query;

}

또는 const { data: queryData, isLoading } = useGetAlbums({ staleTime: 300000 });

 

StaleTime과 keepPreviousData는 React Query의 기능 중 하나로서, 각각 장단점이 있습니다.

staleTime의 장점은 다음과 같습니다.

• 캐시를 유지하면서도 일정 시간이 지나면 재요청하므로, 최신 데이터와 함께 성능을 최적화할 수 있습니다.
• 다른 사용자가 생성, 수정 또는 삭제한 데이터가 반영되는 등의 경우를 고려하여, 일정 시간마다 업데이트된 데이터를 가져올 수 있습니다.

하지만 단점으로는 다음과 같습니다.

• staleTime 이후에 다시 데이터를 가져오려면 요청을 다시 보내야 하므로, 불필요한 네트워크 트래픽이 발생할 수 있습니다.
• staleTime의 기간이 너무 길면 사용자가 업데이트된 정보를 바로바로 확인하지 못할 수 있습니다.

반면에 keepPreviousData의 장점은 다음과 같습니다.

• 새로운 데이터가 늦게 도착하거나, 서버 측에서 일시적으로 오류가 발생하더라도, 이전 데이터를 유지할 수 있습니다.
• 네트워크 오류나 서버 장애 등으로 인해 새로운 데이터를 가져오지 못할 경우, 이전 데이터를 보여줌으로써 UX를 개선할 수 있습니다.

하지만 단점으로는 다음과 같습니다.

• 이전 데이터를 사용자에게 계속해서 보여주므로, 사용자가 변경 사항을 알 수 없습니다.
• 새로운 데이터를 가져오기 위해 추가적인 요청을 보낼 필요가 없으므로, 최신 정보와 함께 성능을 최적화할 수 없습니다.

따라서 상황에 따라, 적절한 방식을 선택하여 사용해야 합니다. 예를 들어, 데이터가 자주 변경되는 경우에는 staleTime을 설정하여 최신 데이터를 빠르게 가져오는 것이 적절하며, 데이터가 자주 변경되지 않는 경우에는 keepPreviousData를 사용하여 이전 데이터를 유지하는 것이 적절합니다.