staleTime
- 뜻: 유효 기간, 유통 기한
- 요약
- 이 시간 동안에는 쿼리를 다시 수행할 필요 없이 데이터를 재사용
- 이 시간이 지나기 전까지는 데이터를 "신선"으로 간주하고 데이터 요청 X
- 데이터 요청과 재사용이 핵심
- 사용 예시 상황
- 상황: 사용자가 블로그 포스트 목록을 보고 있는 애플리케이션을 가정해보자. 이 데이터는 자주 업데이트되지 않는다.
- 설정:
staleTime을 10분(600,000ms)으로 설정한다. - 결과: 사용자가 포스트 목록을 조회하고, 이후 10분 이내에 다시 조회할 경우, React Query는 캐시된 데이터를 재사용하여 즉각적으로 결과를 표시한다. 이 기간 동안에는 서버에 대한 추가 요청이 발생하지 않는다. 10분이 지나면 다음 조회 시점에 새로운 데이터를 가져오기 위해 서버에 요청한다.
- 효과: 불필요한 데이터 요청을 줄인다.
cacheTime
- 뜻: 캐시 지속 시간
- 요약
- 다른 페이지로 넘어가서 이제는 사용하지 않는 데이터를 언제까지 가지고 있을 것인가
- 이 시간 이전에 사용자가 해당 화면으로 돌아올 때 빠르게 이전에 로드된 데이터를 표시
- 사용하지 않는 데이터 보관이 핵심
- 사용 예시 상황
- 상황: 같은 블로그 포스트 목록 애플리케이션에서 사용자가 특정 포스트를 읽고 나서 다른 페이지로 이동했다가 돌아온 경우를 가정해보자.
- 설정:
cacheTime을 5분(300,000ms)으로 설정한다. - 결과: 사용자가 포스트를 읽고 나서 다른 페이지로 이동한 후 5분 이내에 포스트 목록으로 돌아오면, 캐시된 데이터가 즉시 표시된다. 이는 포스트 목록 쿼리가 비활성 상태가 되었다가 다시 활성화되었을 때 적용된다. 만약 사용자가 5분 이후에 돌아온다면, 캐시된 데이터는 이미 제거되었기 때문에, 애플리케이션은 새로운 데이터를 서버로부터 가져와야 한다.
- 효과: 불필요한 메모리 사용을 없앤다.
차이점
staleTime은 데이터가 얼마나 오랫동안 "신선"으로 간주되는지를 결정하고,cacheTime은 캐시된 데이터가 메모리에 얼마나 오래 유지되는지를 결정.staleTime은 데이터가 캐시에 남아 있는 동안 자동 re-fetching의 필요성을 제어하는 반면,cacheTime은 캐시에서 데이터가 완전히 제거되기까지의 시간을 관리.
반가워요.