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

간단 소개

React Query의 내부 구조, useQuery 훅 실행 흐름, 데이터 업데이트 시 컴포넌트 렌더링 과정을 분석합니다.

AI Summary

React Query 라이브러리 구조
- @tanstack/query-core (핵심 기능) 및 @tanstack/react-query (React 연동) 패키지로 구성.
- QueryClient는 QueryCache를 소유하며, 캐시와 상호작용하는 메서드 제공.
- QueryCache는 Query 인스턴스들을 관리하며, build 메서드를 통해 queryKey를 기반으로 Query 인스턴스를 생성/재활용하여 중복 네트워크 요청 방지.
Query와 QueryObserver의 역할
- Query는 QueryCache에 저장되는 인스턴스로, 쿼리 결과 데이터와 상태를 가짐.
- QueryState 업데이트 시 Dispatch, Reducer, Action 패턴을 사용하여 QueryObserver에 알림.
- QueryObserver는 Query의 변화를 관찰하고, 연결된 리스너(React 컴포넌트)에게 알림.
useQuery 훅 실행 흐름 및 View 업데이트
- useQuery 훅은 QueryObserver 인스턴스를 생성하여 React 컴포넌트와 연결.
- QueryObserver는 useSyncExternalStore 훅을 통해 컴포넌트 리렌더링을 유발하여 View 업데이트.
- Subscribable 클래스의 listeners 필드에 리렌더링 함수가 추가되어, Query 변화 시 컴포넌트 리렌더링 지시.