데브허브 | DEVHUB | TanStack Query - How to become a React Query God
React에서 useEffect와 수동 데이터 가져오기에 지치셨나요? 하나의 쿼리에 여러 개의 상태를 작성하고, 쿼리가 제대로 작동하도록 이상한 방법을 따라야 하시나요? 이 영상에서는 TanStack Query를 사용하여 이러한 번거로움을 극복하고 쿼리 실력을 한 단계 높이는 방법을 보여드리겠습니다. 간단한 설정 단계부터 강력한 캐싱, 그리고 번개처럼 빠르고 효율적인 쿼리까지, TanStack Query의 놀라운 기능들을 자세히 살펴보겠습니다.
TanStack Query는 이전에 React Query로 알려져 있었으니, 이름 때문에 헷갈리지 마세요. TanStack은 최신 버전일 뿐입니다! 제가 보기에 TanStack Query/React Query는 전문적인 실제 React 앱에서 가장 널리 사용되는 쿼리 도구입니다. 따라서 이 영상이 TanStack Query를 시작하는 데 도움을 드리고, 쿼리의 달인이 되는 길을 열어드리겠습니다!
학습할 내용은 다음과 같습니다.
• TanStack Query가 React 데이터 가져오기, 캐싱 및 업데이트를 간소화하는 방법
• React 앱에서 TanStack Query를 실행하기 위한 단계별 설정
• 쿼리 캐싱 실습 예시
• 앱 성능 향상 및 코드 유지 관리 용이성 향상을 위한 모범 사례
🏖️TanStack Query: https://tanstack.com/query/latest/doc...
이 튜토리얼은 TanStack Query에 대한 모든 것을 설명하는 것이 아니라, 시작하는 데 필요한 모든 필수 도구를 제공합니다. 향후 영상에서는 쿼리 무효화, 오래된 데이터, 데이터 동기화 등에 대해 다룰 예정입니다.
타임스탬프:
0:00 - 소개/개요
0:54 - 설치 및 설정
2:24 - useQuery()
5:00 - TanStack이 왜 중요한가
6:26 - 로딩 상태, 오류 상태, 다시 가져오기 등
10:22 - 쿼리 옵션(매개변수)
13:44 - 조건부 쿼리(일종)
14:53 - 재사용 가능한 쿼리
17:17 - TypeScript 안전성
20:19 - useSuspenseQuery()
21:39 - Suspense 컴포넌트
24:15 - 다중 쿼리
