TanstackQuery 2

React - TanStack Query 오류 처리 패턴

TanStack Query로 에러(오류) 처리 패턴 정리TanStack Query를 쓰면 데이터 패칭은 편해지지만, 에러 처리 패턴은 직접 설계해줘야 합니다. (어디서 토스트를 띄울지, 어디는 조용히 실패하게 둘지 등) 이 글에서는 TanStack Query v5 기준으로 실전에서 자주 쓰는 오류 처리 패턴을 정리해보겠습니다.1️⃣ 기본 개념 — 에러가 어떻게 감지되는가?TanStack Query에서 쿼리가 에러 상태가 되려면 queryFn / mutationFn이 에러를 던져야(throw) 합니다.즉, Promise.reject() 또는 throw new Error() 형태여야 isError === true 가 됩니다.특히 fetch를 사용할 때는 res.ok를 직접 체크해서 실패 시 throw를 해줘..

카테고리 없음 2025.11.18

React - Tanstack Query 로 검색 UX 최적화하기

TanStack Query로 검색 UX 최적화하기이전 글에선 debounce를 통한 타이핑 시 검색 로직의 최적화를 알아보았습니다. 이번에는 업그레이드 된 버전으로, 프론트엔드 api 캐싱 라이브러리인 Tanstack Query와의 연동 및 최적화 방법에 대해 알아봅시다! 검색 기능은 거의 모든 웹 서비스에서 핵심 역할을 합니다. 하지만 단순한 API 호출만으로는 UX가 매끄럽지 않거나, 로딩 플리커(깜빡임), 중복 요청, 성능 낭비가 발생할 수 있습니다. 이를 위해 캐싱, 디바운싱, staleTime, keepPreviousData, Enter 제출과의 결합 등 실무에서 바로 사용하는 구조를 중심으로 살펴봅시다.1️⃣ 검색 API + TanStack Query 기본 구조먼저 검색 로직을 위한 가장 기본..

카테고리 없음 2025.11.18