getTodos는 DB에 직접 요청하지 않고, 먼저 Context에 캐싱된 데이터를 요청
- 캐시에 데이터가 있으면, 캐시 데이터를 반환 (API 호출 x)
- 없으면
getTodos를 호출 → API 서버에 요청
- DB에서 데이터를 받아와 context에 캐싱되면 해당 데이터와 연결된 모든 컴포넌트들에서 리렌더링 발생
- Tanstack query의 자동 상태 동기화 기능 덕분
- 리렌더링 시, 다시
getTodos가 실행되며 Context에서 캐싱된 데이터를 받아옴
- 이때
getTodos는 새로운 API 요청을 보내는 것이 아니라 캐싱된 데이터를 가져옴
- 캐시를 무효화(
invalidateQueries)하지 않는 이상 무조건 Context에 저장된 데이터 재활용
invalidateQueries를 통해 쿼리를 무효화하면, 연결된 모든 컴포넌트가 데이터를 다시 받아옴
invalidateQueries(["todos"])는 해당 키 ["todos"]와 관련된 쿼리를 무효화- 무효화된 쿼리는 다시
getTodos를 호출하여 최신 데이터를 가져옴
