Tanstack-query

Tanstack-query

TanStack Query는 React Query라고 불렸으며, 리액트를 포함한 다양한 자바스크립트 프레임워크에서 사용 가능한 데이터 fetching, 캐싱, 동기화, 업데이트를 효율적으로 처리하기 위한 라이브러리이다.

서버 상태 관리에 특화되어 있으며, 클라이언트와 서버 간의 데이터를 간편하게 동기화하도록 돕는다.

주요 기능

1. 데이터 Fetching 및 Caching
   • 데이터를 가져오고(fetch) 이를 캐싱하여 동일한 요청을 반복하지 않아도 된다.
   • 동일한 데이터를 사용하는 여러 컴포넌트가 있을 때, 이를 자동으로 공유한다.
2. 자동 재요청(Refetching)
   • 데이터가 오래되거나(stale) 네트워크 상태가 변경되었을 때 자동으로 데이터를 다시 가져온다.
3. 서버 상태 동기화
   • 클라이언트와 서버의 데이터 상태를 동기화하며, 서버 상태를 관리하는 데 필요한 로직을 단순화한다.
4. 백그라운드 데이터 갱신
   • 사용자가 데이터와 상호작용하는 동안 백그라운드에서 데이터를 자동으로 갱신한다.
5. 서버 사이드 렌더링 지원
   • Next.js와 같은 프레임워크에서 SSR을 쉽게 설정하고 사용할 수 있다.

TanStack Query를 사용하는 이유

1. 서버 상태 관리 단순화
   • 로딩 상태, 오류 처리, 리트라이, 캐싱 등을 직접 구현할 필요가 없으며, 리덕스 등의 상태관리 라이브러리와 비교해 서버 데이터 관리를 더 효율적으로 처리할 수 있다.
2. 최적화된 사용자 경험
   • 네트워크 요청을 최소화하고, UI를 최신 데이터로 유지하여 사용자 경험을 개선한다.
3. 확장성과 유연성
   • 간단한 REST API부터 GraphQL, WebSocket, 비동기 작업까지 유연하게 처리할 수 있다.

TanStack Query는 주로 서버에서 데이터를 자주 가져와야 하는 애플리케이션을 개발할 때나, API 요청 및 응답 로직이 복잡하고 상태 관리와 데이터 동기화가 중요한 경우에 사용한다.

---

stale time과 gc time의 차이점

Tanstack-query에서 staleTime과 gcTime은 데이터를 캐싱하고 관리하는 데 중요한 두 가지 설정 값이다.

 

Stale Time

• 정의: 데이터가 fresh 상태에서 stale 상태로 전환되기까지의 시간을 말한다.
• 기본값: 0ms (데이터는 기본적으로 즉시 stale 상태가 됨)
• 목적: 데이터가 stale 상태로 전환되었는지 결정하여 재요청(refetching)이 필요함을 알린다.

동작 원리

• 캐시된 데이터가 서버로부터 가져온 이후 stale time 내에서는 fresh 상태로 간주된다.
• stale 상태가 되면 사용자가 데이터를 다시 요청하거나, 네트워크 재연결, 재요청(refetch) 등의 특정 이벤트 요청이 발생할 때 데이터가 다시 가져와질 수 있다.

GC Time (Garbage Collection Time)

• 정의: 데이터가 더 이상 사용되지 않거나 inactive 상태로 전환된 이후, 캐시에서 제거되기까지의 시간을 말한다.
• 기본값: 5분
• 목적: 캐시 메모리를 관리하여 사용되지 않는 데이터를 제거함으로써 리소스를 최적화한다.

동작 원리

• 데이터는 캐시된 후 사용되지 않으면 inactive 상태가 된다.
• GC 시간이 지나면, inactive 상태의 데이터는 캐시에서 완전히 제거된다.
• 재요청(refetch)이 발생하면, 데이터가 없으므로 새로운 네트워크 요청이 필요하다.

 

주요 차이점

속성	Stale Time	GC Time
목적	데이터가 stale 상태로 전환되는 시간 결정	사용되지 않는 데이터를 캐시에서 제거하는 시간 설정
기본값	0ms	5분
영향	데이터 재요청 여부 결정	캐시 메모리 관리
사용 시점	UI에서 데이터의 신선함을 유지하고, 재요청을 제어할 때	불필요한 메모리 사용을