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

이 글은 React 프런트엔드 프로젝트에서 서버 상태 관리를 위한 라이브러리인 React Query의 내부 구조와 `useQuery` 훅의 실행 흐름을 분석합니다. React Query는 데이터 조회, 캐싱, 동기화, 업데이트 등 다양한 이점을 제공하며, `@tanstack/query-core`와 `@tanstack/react-query` 패키지로 구성됩니다.

`QueryClient` 인스턴스를 생성하고 `useQuery` 훅을 통해 데이터를 관리하는 과정에서 내부 동작 방식을 이해하는 것이 중요함을 강조합니다. 특히, `useQuery` 실행 시 쿼리 데이터가 업데이트될 때 컴포넌트의 뷰가 어떻게 갱신되는지에 대한 내부 메커니즘을 설명하며, 라이브러리의 올바른 사용법과 이해를 돕는 것을 목표로 합니다.