FrontEngineer JungBam

쿼리키 / 리액트 쿼리에서의 캐싱이란? 본문

react-query

쿼리키 / 리액트 쿼리에서의 캐싱이란?

정밤톨 2023. 1. 2. 17:46

useQuery의 첫번째 매개변수

- 기본적으로 리액트 쿼리는 쿼리 키를 기반으로 쿼리 캐싱을 관리함.
- 쿼리 키는 고유한 값을 가져야 함.( useQuery 와 useInfiniteQuery간에도 고유해야 함.)
- 쿼리 함수가 변수에 의존하는 경우 쿼리 키에 변수를 포함해야 함.
  => const result = useQuery(['todos',todoId],()=>fetchTodoById(todoId))

리액트 쿼리에서 캐싱이란?

캐싱이란?
- 명령어와 데이터를 디스크 캐시 등에 일시적으로 저장하는 과정

리액트 쿼리에서는 캐싱을 어떻게 관리할까?
- staleTime과 cacheTime을 통해 관리함.(useQuery의 세번째 매개변수 옵션 중 일부)
- staleTime : 데이터가 오래된 것으로 간주되는데에 걸리는 시간
  => default : 0
       왜 default가 0이냐면 최신화되지 않은 것을 오래 갖고 있는 것보다 최신화 시키는 것이 기본인 게 낫기 때문.
- cacheTime : 미사용 / 비활성 캐시 데이터가 메모리에 남이있는 시간 / 이 시간 후에는 가비지로 간주되어 처리됨.
  => default : 5분(5 * 60 * 1000)
★ staleTime을 지정해주지 않고 쓴다면 react-query의 캐싱 기능을 제대로 활용할 수 없는 것 :
  => 캐싱된 값을 계속해서 낡은 것으로 판단하고 서버에 refetching 요청을 보내기 때문.
반응형

'react-query' 카테고리의 다른 글

갑자기 disabled?  (0) 2023.04.27
redux, redux-toolkit, react-query  (0) 2023.03.03
react-query로 프로젝트를 하고 느낀점(장점)  (0) 2023.02.11
Prefetch  (0) 2023.01.09
리액트 쿼리 버전 4에서 바뀐점.  (0) 2022.12.31
Comments