React Query의 구조와 useQuery 실행 흐름 살펴보기
프론트엔드
React Query의 구조와 useQuery 실행 흐름 살펴보기
두줄요약
React Query의 내부 구조와 useQuery 실행 흐름을 살펴보았습니다. Query 상태 변화가 QueryObserver와 리스너를 거쳐 컴포넌트 리렌더링으로 이어지는 과정을 정리했습니다.
핵심 내용
- React Query의 내부 구조와 useQuery 실행 흐름을 QueryClient, QueryCache, Query, QueryObserver 중심으로 정리
- queryKey 해시와 QueryCache 재사용으로 동일 쿼리의 중복 요청을 줄이는 방식 설명
- Query 상태 변경 시 QueryObserver가 리스너를 통해 React 컴포넌트 갱신을 유도하는 흐름 공유
- useQuery는 useBaseQuery와 useSyncExternalStore를 통해 Observer 생성, 구독, 결과 추적을 연결