1. Tanstack Query란?

: 서버 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 비동기 상태 관리 라이브러리

• Tanstack Query를 사용함으로써 서버 데이터와 클라이언트 데이터를 분리

Tanstack Query는 비동기 처리 라이브러리(Data fetching library)가 아니라, 비동기 상태 관리 라이브러리입니다. 비동기 처리 라이브러리는, 브라우저에 내장되어 있는 Fetch API 및 서드 파티 라이브러리인 Axios가 있습니다. 지역 상태를 관리하는 useState, 전역 상태를 관리하는 Context API, Zustand, Redux 등이 있다면 서버 상태를 관리하는 Tanstack Query, SWR, Redux Saga등이 있습니다. 이렇듯 클라이언트와 서버의 상태 분리를 할 수 있도록 해주며, 비동기 로직을 제거하여 관심사가 분리되어 선언적으로 작성할 수 있도록 해주는 라이브러리입니다.

타 라이브러리와 비교

Tanstack Query vs Redux Saga vs SWR

출처 : npm trends

전역 상태 관리 라이브러리에서처럼 큰 차이를 보이지는 않고, 어느정도 치열한 다운로드 수 차이를 확인할 수 있습니다.

1. Redux Saga

Redux Saga는 액션을 모니터링하고 있다가 특정 액션이 발생하면 이에 따라 특정 작업을 하는 방식으로 사용합니다. 여기서 특정 작업이란, 특정 자바스크립트를 실행하는 것 일수도 있고, 다른 액션을 디스패치 하는 것 일수도 있고, 현재 상태를 불러오는 것 일수도 있습니다.

• 단점
  1. Javascript 초심자라면 생소할만한 Generator 문법을 사용
  2. 사용할 때 늘어나는 보일러 플레이트 코드와 사가 함수 재사용에 대한 제약들로 인해 쓸데없이 추가되는 코드
  3. 유지보수가 어려움

2. SWR

SWR은 Next.js를 만든 vercel에서 개발한 라이브러리로, Tanstack Query와 유사한 기능을 제공합니다.

• Tanstack Query가 SWR보다 좋은 점
  1. Devtools : 데이터 흐름을 파악할 수 있음. SWR은 서드 파티 라이브러리를 이용해야 한다.
  2. 무한 스크롤 구현
     1. getPreviousPageParam, fetchPreviousPage, hasPreviousPage와 같은 다양한 페이지 관련 기능 존재
  3. select를 사용해 raw data로부터 원하는 데이터 추출하여 반환할 수 있다.
  4. data optimization
  5. garbage Collection : 캐싱된 데이터가 메모리에서 해제되는 시점을 정할 수 있다.

2. Tanstack Query의 각 기능들