시작하기

Tanstack Query란?

• 웹 응용 프로그램의 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 할 수 있도록 도와주는 라이브러리
• 대부분의 기존 상태 관리 라이브러리는 클라이언트 상태를 사용하는 데 유용하지만 서버 상태가 완전히 다르기 때문에 비동기 또는 서버 상태를 사용하는 데는 그다지 적합하지 않음
• 기능
  • 캐싱
  • 동일한 데이터에 대한 여러 요청을 단일 요청으로 중복 제거
  • 백그라운드에서 "오래된" 데이터 업데이트
  • 데이터가 "오래된" 경우 파악
  • 데이터 업데이트를 최대한 신속하게 반영
  • 페이징 및 레이지 로드 데이터와 같은 성능 최적화
  • 서버 상태의 메모리 및 가비지 수집 관리
  • 구조 공유를 사용하여 쿼리 결과 메모
• 장점
  • 응용프로그램에서 복잡하고 잘못 이해된 코드의 많은 줄을 제거, React Query 로직의 몇 줄로 대체 가능. (코드 간소화)
  • 새로운 서버 상태 데이터 소스를 연결할 필요 없이 애플리케이션의 유지 관리성을 높이고 새로운 기능을 쉽게 구축 가능
  • 애플리케이션이 그 어느 때보다 빠르고 응답성이 높아짐으로써 최종 사용자에게 직접적인 영향을 미침
  • 대역폭을 절약, 메모리 성능을 향상

변경사항

주요 변경 사항

• useQuery와 기타 훅을 통합
• eslint 규칙 출시
• cacheTime을 gcTime 이름 변경
• keepPreviousData, placeholderData 병합
• loading 상태를 pending으로 이름 변경
• useQuery 콜백 제거

새로운 기능

• 낙관적 업데이트 단순화
  • useMutation에서 반환된 variables를 활용해 낙관적 업데이트 수행
  • 캐시를 수동으로 업데이트하는 코드 작성할 필요 X
• mutation state 공유 가능
  • 새로운 useMutationState를 통해 구성 요수 간에 공유되는 모든 변형 상태 접근 가능
• suspense 지원
  • useSuspenseQuery, useSuspenseInfiniteQuery, useSuspenseQueries에서 suspense 사용 가능
• 향상된 무한 쿼리
  • 한 번에 여러 페이지 가져오기 가능
  • 캐시에 저장되는 최대 페이지 양 저장 가능
• 새로운 Devtools
  • 프레임워크에 구애받지 않는 방식으로 작성
  • UI 개선됨
  • 캐시 인라인 편집 및 라이트 모드 등 새로운 기능 추가
• api queryOptions
  • 단일 개채를 매개변수로 하여 useQuery를 호출하는 통합된 방법 생성
    • 더 나은 추상화 구축 가능
  • queryOptions로 옵션 객체의 타입 추론 가능

설치

npm i @tanstack/react-query	// tanstack query 설치

npm i -D @tanstack/eslint-plugin-query	// 코드 안정성을 위한 eslint plugin (권장사항)

npm i @tanstack/react-query-devtools	//devtools 설치

 

 

참고:

https://tanstack.com/blog/announcing-tanstack-query-v5

https://www.moonkorea.dev/React-TanStack-Query-v5-%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0-(%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%BF%BC%EB%A6%AC)

TanStack Query v5 정식 버전 살펴보기 (리액트 쿼리)

Announcing TanStack Query v5 | TanStack Blog