TanStack Query, 직접 구현해보기(1) - 왜 직접 구현해보게 되었나?

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

개발 툴

대상자

프론트엔드 개발자 및 라이브러리 내부 구조에 관심 있는 개발자

난이도: 중급 이상 (라이브러리 내부 작동 원리 이해 필요)

핵심 요약

• TanStack Query는 caching, staleTime, gcTime 등의 개념을 통해 서버 상태를 효율적으로 관리하는 데이터 패칭 라이브러리
• useSyncExternalStore를 통해 React 외부 상태와의 안정적인 동기화를 실현
• 전역 데이터 저장소 구조를 통해 refetch 및 mutation을 자동화하여 개발자 편의성 향상

섹션별 세부 요약

1. 왜 TanStack Query를 직접 구현하게 되었나?

• 라이브러리 없이 미션 수행 시 불편함을 느껴, 라이브러리의 필요성을 인식하게 됨
• 데이터 패칭 훅을 만들며 전역 상태 관리 필요성 인식
• TanStack Query의 caching 기능에 대해 호기심을 느끼고 내부 구조 탐구 시작

2. TanStack Query의 핵심 기능

• useQuery: isLoading, isError, data 제공 및 Query Key 기반 캐싱
• useMutation: onSuccess, onError 콜백 제공
• staleTime / gcTime: 캐시 효율 관리 및 GC 기능
• Request Coalescing: 중복 요청 방지
• AbortController: unmount 시 요청 자동 취소
• refetchOnWindowFocus, refetchOnReconnect, refetchInterval: 자동 리패칭 조건 설정
• useSyncExternalStore: React 외부 상태와의 동기화

3. 전역 상태 관리 및 자동 리패칭

• Provider Hell 방지를 위해 전역 데이터 저장소 구조 설계
• mutation 시 자동으로 refetch 될 대상을 명시하는 방식으로 불편함 해소
• 전역 상태 관리 라이브러리 대부분 useSyncExternalStore 사용

4. TanStack Query의 구현 복잡성

• 내부 코드 분석을 통해 기능은 강력하지만 구현 방식이 복잡함 인식
• 직접 구현하며 TanStack Query의 의도와 구조를 이해하고자 함

결론

• TanStack Query를 직접 구현하면서 데이터 캐싱, 전역 상태 관리, 자동 리패칭 기능의 중요성을 깨달음
• useSyncExternalStore와 staleTime, gcTime 등의 개념을 직접 경험함으로써 라이브러리의 작동 원리에 대한 이해도가 증가
• 전역 상태 관리 없이도 효율적으로 데이터를 전역적으로 관리할 수 있는 구조 설계가 실무에서 유용하다.