최종 수정 : 24.12.24
React Query
서버 상태 관리를 위한 라이브러리이며,TanStack Query라고 이름이 변경됐다. 서버 데이터를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 작업을 쉽게 만들어주는 도구이다.
기존에는 React에만 국한된 라이브러리였으나 Vue, Svelte, Solid 등 다른 프레임워크&라이브러리에서도 사용할 수 있게 됐다. 그래서 개발자인 Tanner Linsley가 "Ten"은 Tanner의 약자이고, "Stack"은 여러 프레임워크를 지원한다는 의미로 "TanStack Query"로 변경했다.
TanStack Query를 사용하면, 기존에 Redux나 다른 상태 관리 라이브러리로 처리하던 서버 상태 관리 로직을 훨씬 간단하게 구현할 수 있다.
등장 배경
기존의 Redux나 MobX 같은 상태 관리 라이브러리들은 클라이언트 상태 관리에는 적합했으나, 서버 데이터를 다루는 데 있어 여러 한계점이 있었다. 데이터의 신선도와 캐싱을 수동으로 관리해야 했고, 중복 요청 방지나 로딩 상태, 에러 처리도 개발자가 일일이 구현해야 했다. 또한 실시간 데이터 동기화, 캐시 무효화, 페이지네이션 구현 등에서 많은 보일러플레이트 코드가 필요했다.
주요 특징
1. 자동 캐싱 시스템
서버로부터 받아온 데이터는 자동으로 캐시되며, 이는 staleTime과 cacheTime이라는 두 가지 핵심 설정으로 관리된다. staleTime은 데이터가 신선하다고 간주되는 시간을 의미하며, 이 시간 동안은 재요청이 발생하지 않는다. cacheTime은 비활성화된 데이터가 캐시에서 완전히 제거되기까지의 시간을 의미한다. 이러한 세밀한 캐시 제어를 통해 불필요한 네트워크 요청을 줄이고 애플리케이션의 성능을 최적화할 수 있다.
2. 자동 데이터 동기화
컴포넌트가 마운트될 때, 브라우저 창이 포커스될 때, 네트워크가 재연결될 때 자동으로 데이터를 동기화한다. refetchOnMount, refetchOnWindowFocus, refetchOnReconnect 옵션을 통해 이러한 동작을 세밀하게 제어할 수 있다. 또한 poling 기능을 통해 주기적으로 데이터를 자동 갱신할 수 있어, 실시간성이 필요한 데이터를 효과적으로 관리할 수 있다.
3. 중복 요청 방지
여러 컴포넌트에서 동일한 데이터를 요청할 때, TanStack Query는 자동으로 중복 요청을 감지하고 하나의 네트워크 요청으로 통합한다. 이를 통해 서버 부하를 줄이고 애플리케이션의 성능을 향상시킬 수 있다. 응답받은 데이터는 모든 컴포넌트에서 공유되어 일관된 상태를 유지할 수 있다.
4. 상태 관리 시스템
각 쿼리는 여러 상태 값을 제공한다. isLoading은 데이터의 첫 로딩 상태를, isFeching은 데이터 리페칭 상태를, isError는 에러 상태를, isSuccess는 성공 상태를 나타낸다. 이러한 상태들을 통해 로딩 스피너, 에러 메시지, 성공 메시지 등을 쉽게 구현할 수 있다. 또한 각 상태에 따른 데이터와 에러 정보도 함께 제공되어 세밀한 UI 컨트롤이 가능하다.
5. 데이터 prefetching
사용자의 행동을 예측하여 데이터를 미리 가져올 수 있다. 예를 들어, 페이지 전환이나 모달 창을 열기 전에 필요한 데이터를 미리 로드하여 사용자가 실제로 데이터를 필요로 할 때 즉시 보여줄 수 있다. 이는 사용자 경험을 크게 개선하는 요소이다.
6. 낙관적 업데이트
서버의 응답을 기다리지 않고 UI를 즉시 업데이트할 수 있다. 예를 들어, '좋아요' 버튼을 클릭했을 때 서버 응답을 기다리지 않고 즉시 카운트를 증가시킬 수 있다. 만약 서버 요청이 실패하면 자동으로 이전 상태로 롤백된다. 이를 통해 더 반응성 있는 UI를 구현할 수 있다.
7. 무한 스크롤과 페이지네이션
useInfiniteQuery 훅을 통해 복잡한 무한 스크롤을 쉽게 구현할 수 있다. 페이지 정보가 자동으로 관리되며, 이전에 로드된 데이터를 유지하면서 새로운 데이터를 추가할 수 있다. 또한 각 페이지의 로딩 상태나 에러 상태도 개별적으로 관리할 수 있어 세밀한 UI 컨트롤이 가능하다.
8. 오프라인 지원
네트워크 연결이 끊어진 상황에서도 캐시된 데이터를 사용할 수 있다. 네트워크가 복구되면 자동으로 데이터를 동기화하여 최신 상태를 유지한다. 이를 통해 오프라인 상황에서도 애플리케이션의 기본적인 기능을 유지할 수 있다.
9. 개발자 도구
강력한 DevTools를 제공하여 쿼리의 상태와 캐시된 데이터를 실시간으로 확인할 수 있다. 각 쿼리의 상태 변화를 추적할 수 있으며, 캐시된 데이터를 직접 수정하거나 쿼리를 수동으로 무효화할 수 있다. 이는 디버깅과 개발 과정을 크게 효율화한다.
문제 해결 방식
TanStack Query는 서버 상태 관리의 복잡한 문제들을 선언적이고 직관적인 API를 통해 해결했다. 자동화된 캐싱 시스템, 데이터 동기화, 상태 관리 기능을 제공하여 개발자가 비즈니스 로직에 집중할 수 있도록 만들었다. 이를 통해 개발 생산성이 향상되고 애플리케이션의 품질이 개선될 수 있었다.
Q. 상태관리 라이브러리만으로는 한계가 있는가?
본질적으로 서버 상태와 클라이언트 상태는 다른 특성을 갖고 있다. 때문에, 단순 상태관리 라이브러리만으로는 서버 상태를 관리하는 데 여러 한계점이 있다.
서버 상태의 특성
- 원격 저장소에 있는 데이터로, 직접적인 소유권이 없다.
- 비동기적으로 가야와야 하는 데이터다.
- 다른 사용자가 수정할 수 있어 항상 최신성을 보장할 수 없다.
- 데이터가 시간이 지나면 "오래된" 상태가 될 수 있다.
- 캐싱, 동기화, 업데이트 주기 관리가 필요하다.
이런 특성들 때문에 상태관리 라이브러리로 서버 상태를 관리한려면
- 로딩 상태를 수동으로 관리해야 한다.
- 에러 상태를 직접 처리해야 한다.
- 캐시 무효화 로직을 직접 구현해야 한다.
- 동일 데이터에 대한 중복 요청을 수동으로 방지해야 한다.
- 데이터 리페칭(갱신) 로직을 일일이 작성해야 한다.
- 페이지네이션이나 무한 스크롤을 위한 복잡한 로직이 필요하다.
이로 인해 많은 보일러플레이트 코드가 발생하고, 개발자가 비즈니스 로직 대신 상태 관리 로직에 더 많은 시간을 할애해야 하는 문제가 발생한다.
댓글