Tanstack-query란?

이름 변경 이유

원래는 React-Query였음. 하지만 2023년 9월에 TanStack Query로 이름이 변경

변경 이유

1. React Query는 Facebook에서 유지보수하는 React 공식 라이브러리가 아니라는 점에서 상표권 문제가 있을 수 있었기 때문임
2. 새로운 이름은 React에 종속되지 않으며, React 이외 다른 프레임워크나 라이브러리와도 함께 사용될 수 있음

그래서 Tanstack-query가 뭔데?

Tanstack Query는 JavaScript 애플리케이션에서 서버 상태를 관리하기 위한 라이브러리로, 클라이언트와 서버 간 데이터 동기화를 간편하게 처리할 수 있도록 설계 되었음

• 웹 앱에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 만드는 것을 지원
• 전역 상태 관리 도구와 다름
  • 전역 상태 관리 도구는 애플리케이션의 상태를 관리하고 여러 컴포넌트 간에 상태를 공유하기 위한 라이브러리 (ex : Redux, MobX, Context API 등)
  • Tanstack-Query는 데이터 요청 및 캐싱을 관리하기 위한 라이브러리로 API 호출, 데이터 캐싱, 상태 관리 등의 작업을 담당함

Tanstack Query의 장점

• 캐싱을 통해 어플리케이션의 속도를 향상 시킴
• 동일한 데이터에 대한 중복 요청을 제거
• 오래된 데이터의 상태를 파악해서 Updating을 지원
• Garbage Collection을 이용해 서버 쪽 데이터 메모리 관리
• React Hooks와 유사한 문법 인터페이스

초기 세팅법

1. 패키지 설치

npm install @tanstack/react-query

yarn add @tanstack/react-query

pnpm add @tanstack/react-query