프론트엔드
React Query의 구조와 useQuery 실행 흐름 살펴보기
두줄요약
React Query의 QueryClient·QueryCache·Query·QueryObserver 내부 역할을 살펴봤습니다. useQuery가 useSyncExternalStore로 상태 변경을 구독하고 뷰를 갱신하는 흐름을 설명합니다.
구조와 흐름
@tanstack/query-core의QueryClient,QueryCache,Query,QueryObserver와 React 연동용@tanstack/react-query의 분리QueryClient를 통한 캐시 접근,QueryCache의queryHash기반Query생성·재사용- 동일
queryKey의 유효한 서버 상태 재활용과 중복 네트워크 요청 방지
핵심 내용
Query의QueryState변경 시 dispatch·reducer 기반 상태 갱신과 연결된QueryObserver알림QueryObserver의 이전·이후 결과 얕은 비교를 통한 불필요한 리스너 알림 최소화notifyManager배치 처리와 리스너 순회 기반 변경 전파
구조와 흐름
useQuery의 옵션 정제 후useBaseQuery와QueryObserver전달- 컴포넌트별
QueryObserver인스턴스 생성과useSyncExternalStore기반 구독 연결 QueryObserver.notify의 리스너 실행을 통한 컴포넌트 리렌더링과 최신 데이터 표시
적용해볼 점
queryKey를 캐시 식별자이자 데이터 재사용 기준으로 인식- 서버 상태 갱신부터 뷰 업데이트까지의 Observer·외부 스토어 구독 흐름 이해
