TkDodo's Blog
TanStack Query의 유지관리자 TkDodo (opens in a new tab)는 이 라이브러리를 사용하고 작업하는 방법에 대한 유용한 블로그 글을 시리즈로 제공합니다. 이 기사들은 실제 팁, 모범 사례, 그리고 TanStack Query의 다양한 측면에 대한 개인적인 관점을 제공합니다.
#1: Practical React Query (opens in a new tab)
React Query에 대한 고급 소개로, 문서 이상의 실용적인 팁을 제공합니다. 기본값(staleTime과 gcTime), 서버 상태와 클라이언트 상태를 분리하는 방법, 의존성 처리 및 사용자 정의 훅 생성 방법, 그리고 enabled 옵션의 강력함을 설명합니다.
#2: React Query Data Transformations (opens in a new tab)
React Query로 데이터 변환을 수행하는 방법을 배웁니다. queryFn에서 데이터 변환을 하는 방법과 select 옵션을 사용하는 방법을 비교하며 각 접근 방식의 장단점을 설명합니다.
#3: React Query Render Optimizations (opens in a new tab)
컴포넌트가 React Query를 사용할 때 너무 자주 다시 렌더링되는 문제를 해결하기 위해 할 수 있는 일을 탐구합니다. tracked queries, structural sharing과 같은 최적화 기법과 불필요한 재렌더링을 피하는 방법에 대해 설명합니다.
#4: Status Checks in React Query (opens in a new tab)
상태 체크에 대한 심층 분석을 제공합니다. isPending이나 isError를 먼저 확인하기보다는 data의 가용성을 먼저 확인하는 것이 사용자 경험에 미치는 영향을 설명합니다.
#5: Testing React Query (opens in a new tab)
React Query를 테스트할 때 문서에서 제공하는 기본 사항 외에 추가적인 팁을 제공합니다. retries를 끄거나 console을 침묵시키는 방법 등을 다루며, 성공 및 오류 상태에 대한 테스트가 포함된 예제 저장소 (opens in a new tab)를 링크합니다.
#6: React Query and TypeScript (opens in a new tab)
React Query가 TypeScript와 함께 사용할 때의 장점을 설명합니다. Generics 활용, 타입 추론, unknown 오류 처리 방법, 그리고 명시적으로 타입을 지정하지 않고도 useQuery와 관련 훅을 사용하는 방법을 다룹니다.
#7: Using WebSockets with React Query (opens in a new tab)
React Query를 사용하여 실시간 알림을 구현하는 방법을 단계별로 설명합니다. 이벤트 기반 구독과 클라이언트로 직접 데이터를 푸시하는 방법을 다루며, 브라우저의 네이티브 WebSocket API, Firebase, GraphQL 구독 등 다양한 기술에 적용 가능합니다.
#8: Effective React Query Keys (opens in a new tab)
단순한 사용 사례를 넘어 어플리케이션이 성장할 때 효과적으로 쿼리 키를 조직하는 방법을 설명합니다. 키를 효율적으로 관리하는 데 도움이 되는 co-location 및 Query Key Factories에 대해 다룹니다.
#8a: Leveraging the Query Function Context (opens in a new tab)
이전 블로그 글의 수정본으로, 어플리케이션이 성장하면서 Query Function Context와 Object Query Keys를 활용하여 안전성을 극대화하는 방법을 설명합니다.
#9: Placeholder and Initial Data in React Query (opens in a new tab)
Placeholder와 Initial Data라는 두 개념을 비교하여 로딩 스피너 대신 데이터를 동기적으로 표시하여 UX를 개선하는 방법을 설명합니다. 각 접근 방식이 돋보이는 시나리오를 정리합니다.
#10: React Query as a State Manager (opens in a new tab)
React Query가 서버 상태를 위한 상태 관리 도구로 어떻게 사용할 수 있는지 설명합니다. staleTime 설정과 React Query를 단일 진리의 원천으로 사용하여 비동기 상태를 관리하는 방법을 배웁니다.
#11: React Query Error Handling (opens in a new tab)
비동기 데이터 작업에서 오류를 처리하는 방법을 다룹니다. 오류 속성, Error Boundaries, onError 콜백 등을 활용하여 "문제가 발생했습니다"와 같은 오류 상황에 대비하는 방법을 설명합니다.
#12: Mastering Mutations in React Query (opens in a new tab)
서버 데이터를 업데이트하는 데 필요한 뮤테이션의 중요성을 설명합니다. mutate와 mutateAsync의 차이점, 쿼리와 뮤테이션을 연결하는 방법 등을 배울 수 있습니다.
#13: Offline React Query (opens in a new tab)
네트워크 연결이 불안정하거나 없는 모바일 기기에서 어플리케이션이 작동하도록 하기 위한 오프라인 전략을 설명합니다. 다양한 오프라인 전략을 통해 React Query를 활용하는 방법을 배웁니다.
#14: React Query and Forms (opens in a new tab)
서버 상태와 클라이언트 상태가 혼합되는 폼을 다루는 방법을 설명합니다. React Query를 폼과 함께 사용하는 방법과 사용자 상호작용을 처리하는 방법에 대한 팁을 제공합니다.
#15: React Query FAQs (opens in a new tab)
React Query에 대한 자주 묻는 질문을 답변하는 기사입니다. 다양한 질문에 대한 답변을 제공하며, 라이브러리의 여러 측면에 대해 설명합니다.
#16: React Query meets React Router (opens in a new tab)
데이터 로딩을 지원하는 라우터와 React Query의 시너지를 설명합니다. Remix와 React Router가 데이터 가져오기 작업을 최적화하는 방법을 다룹니다.
#17: Seeding the Query Cache (opens in a new tab)
렌더링을 시작하기 전에 Query Cache에 데이터를 미리 채우는 다양한 방법을 설명합니다. 서버 측 사전 패칭이나 setQueryData를 사용하여 로딩 스피너의 수를 최소화하는 방법을 다룹니다.
#18: Inside React Query (opens in a new tab)
React Query의 내부 동작 방식을 자세히 설명합니다. 아키텍처, Query Core, 프레임워크 특정 어댑터 등을 포함하여 라이브러리가 어떻게 작동하는지에 대한 시각적 설명을 제공합니다.
#19: Type-safe React Query (opens in a new tab)
타입이 있는 것과 타입 안전성의 차이를 설명하며, React Query와 TypeScript를 함께 사용할 때 최고의 타입 안전성을 확보하는 방법을 보여줍니다.