FrontEngineer JungBam
쿼리키 / 리액트 쿼리에서의 캐싱이란? 본문
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