TanStack Query - (1) Tanstack Query란?

 

 

React에서 UI 상태는 useState, useReducer 등을 통해 비교적 쉽게 관리할 수 있습니다.
하지만 원격(서버) 상태는 다릅니다. 네트워크 요청, 로딩 처리, 에러 핸들링, 캐싱, 리패칭 등 신경 써야 할 것이 훨씬 많죠.

이런 문제를 깔끔하게 해결해주는 도구가 바로 TanStack Query입니다 (구 이름: React Query).

---

✅ TanStack Query는 어떤 라이브러리인가요?

TanStack Query는 서버 상태(server state)를 효율적으로 관리할 수 있게 도와주는 라이브러리입니다.
불필요한 코드 없이도 데이터 패칭, 로딩 처리, 캐싱 등을 자동으로 처리해주며, 사용자 경험(UX)도 자연스럽게 향상됩니다.

---

🚀 주요 기능

1. 캐싱 (Caching)
   서버에서 받아온 데이터를 메모리에 저장해서, 동일 요청 시 불필요한 재요청을 막습니다.
2. 자동 로딩/에러 상태 관리
   데이터 요청 중일 때와 에러 발생 시의 상태를 자동으로 관리해줍니다.
3. 자동 리패칭 (Refetching)
   탭 포커스 변경이나 리마운트 시 자동으로 최신 데이터를 다시 불러옵니다.
4. 사전 패칭 (Prefetching)
   사용자가 보기 전에 미리 데이터를 받아올 수 있어, 빠르고 부드러운 화면 전환이 가능합니다.
5. 간편한 데이터 업데이트 (Mutation)
   서버 데이터를 쉽게 수정하고, 자동으로 캐시를 최신 상태로 동기화해줍니다.

---

🤔 왜 필요한가요?

서버 상태는 단순한 UI 상태와는 다릅니다. 언제 도착할지 모르고, 공유되며, 항상 최신 상태를 유지해야 하죠.
TanStack Query는 이런 서버 상태의 복잡성을 대신 처리해줌으로써, 우리는 비즈니스 로직에 더 집중할 수 있게 해줍니다.