React Query의 구조와 useQuery 실행 흐름 살펴보기

간단 소개

React Query의 내부 구조, useQuery 훅 실행 흐름, 컴포넌트 업데이트 과정을 분석하여 라이브러리 동작 원리 이해를 돕는다.

AI Summary

React Query 라이브러리 구조
- @tanstack/query-core는 핵심 기능, @tanstack/react-query는 React 연동을 담당
- QueryClient는 QueryCache를 통해 쿼리를 관리하고 상호작용 메서드 제공
- QueryCache는 쿼리 인스턴스들을 저장 및 관리하며, build 메서드로 쿼리 재사용
Query와 QueryObserver
- Query는 쿼리 키, 해시, 옵션, 상태를 가지며, 상태 변경 시 QueryObserver에 알림
- QueryObserver는 쿼리 변화를 관찰하고, 필요한 경우 React 컴포넌트 리렌더링 유도
useQuery 훅 실행 흐름
- useQuery는 useBaseQuery를 호출하여 QueryObserver 인스턴스 생성 및 연결
- useSyncExternalStore 훅을 통해 쿼리 변화 시 컴포넌트 리렌더링을 지시
- QueryObserver의 notify 메서드가 리렌더링을 트리거하여 UI 업데이트