[React] TanStack-query

TanStackQuery

React나 Vue 같은 UI프레임워크를 만들고 상태를 관리하는데는 강하지만

 

서버에서 데이터를 fetch,캐싱,동기화 하는 기능은 따로 제공하지 않습니다.

 

그래서 개발자가 직접 fetch나 axios로 API요청을 만들고

 

로딩 상태, 에러처리, 캐싱, 새로고침등 전부 구현을 해야했는데,

 

Tanstack-query는 위 과정을 효율적으로 하기위한 라이브러리입니다.

 

왜 필요할까?

서버상태는 일반적인 상태관리와 다릅니다

 

서버상태는

• 원격에 저장되어 있고 내가 직접 제어하지 못할 수 있으며
• 항상 비동기 API를 통해 접근해야하고
• 다른사람에 의해 변경될 수 있으며
• 관리되지않는다면 금방 오래된 상태가 됩니다 즉, UI에 보이는 데이터가 실제 DB에 있는 최신 상태랑 다를 수 있습니다.

게다가 캐싱,중복 요청 제거, 오래된데이터 갱신, 메모리관리같은 복잡한 문제도 따라오기 때문에

 

이를 효율적을 관리할 필요가있습니다.

TanStack query가 해주는 일

• 복잡한 상태관리 코드 수십 줄 => 간단한 query로직 몇 줄로 대체가능
• 새로운 서버 데이터 소스를 추가해도 유지보수 부담 최소화
• UX적으로 앱이 더 빠르고 반응성 있게 느껴짐
• 불필요한 요청을 줄여 대역폭 절약 및 성능 최적화

---

설치하기

npm i @tanstack/react-query

 

리액트 v18이상에서 호환됩니다.

 

이렇게 해도 다운로드가 되지만 tanstack-query는 버그나 일관성 문제 관리가 더 쉬운 다음 설치방법을 권장합니다

 

npm i -D @tanstack/eslint-plugin-query

---

핵심개념

Query

쿼리는 DB에 특정한 데이터를 보여달라는 클라이언트의 요청입니다.

 

보통 리액트에서는 데이터를 가져올 때 "이 시점에 이 함수를 실행해서 데이터를 불러워줘" 라고 명령형 코드를 짜는데

 

리액트 쿼리에서는 선언형으로 데이터를 가져올 수 있습니다.

 

이때, 고유한 키와 연결이 필요합니다.

 

쿼리는 GET이나 POST같은 Promise 기반 메서드를 통해 서버에서 데이터를 가져올 때 사용할 수 있는데,

 

컴포넌트나 커스텀 훅에서 쿼리를 구독하려면 useQuery 훅을 호출하고 최소한 두가지를 제공해야합니다.

 

 

여기서 제공한 키는 내부적으로 리패치,캐싱,쿼리 공유 등에 활용됩니다.

 

여기서 info객체는 쿼리의 상태를 나타내는 중요한 값을 담고있는데 그 값은 다음과 같습니다.

• isPending => 로딩 중
• isError => 에러
• isSuccess => 데이터확보

추가적으로 상태에 따라 접근 가능한 정보가 있습니다

• error => isError일때 객체 정보가지고있음
• data => isSuccess일 때 가져온 데이터
• isFetching => 어떤 상태든 간에 요청 중일경우 true

이 값을 어떻게 사용하는지 예시를 적어보자면 다음과 같아요

 

 

그 외 FetchStatus라는 속성이 더 있는데 더 많은 예외처리나 디버깅시 유용하다.

 

 

Mutation

뮤테이션은 서버의 데이터를 생성/ 수정/ 삭제 하거나 서버 사이드이펙트를 수행할 때 사용한다

 

이를 위해 useMutation훅을 사용한다.

 

 

 

뮤테이션은 특정 상태 중 하나만 가질 수 있다.

• isIdle => 아직 아무것도 하지 않은 상태 / 초기상태
• isPending => 뮤테이션 실행 중
• isError
• isSuccess
• error
• data

위 예시처럼 mutate를 호출할 때 단일 변수나 객체를 전달해 뮤테이션 함수에 값을 넘길 수 있다.

Mutation 상태 초기화

가끔은 뮤테이션의 error나 data를 지워야할 때가 있는데 이럴 땐 reset 함수를 사용한다.

 

Mutation 사이드 이펙트

useMutation에는 뮤테이션 라이프사이클 여러시점에서 간단히 사이드이펙트를 처리할 수 있는 옵션이 있다.

 

---

Query Invalidation (쿼리 무효화)

쿼리가 오래된 상태가 될 때까지 기다리는 방식은 적절하지 않습니다.

 

이런 상황에서 QueryClient의 invalidateQueries메서드를 사용하면 오래된 쿼리는 따로 표시하고,

 

필요시 refetch가 가능합니다.

 

 

InvalidateQueries로 무효화 되면 두가지 일이 일어납니다

• 쿼리가 stale상태로 표시됩니다.
• 해당 쿼리가 useQuery등으로 현재 화면에 렌더링 중이라면, 백그라운드에서 자동으로 refetch됩니다.

즉, staleTime 설정을 무시하고 즉시 오래된 쿼리로 바꿉니다.

 

그렇다면 stale상태로 즉시 변화해야하는 데이터는 어떤게 있을까요?

• 새 글 / 댓글 작성 이후

내가 댓글을 달았는데 여전히 이전데이터를 보여주면 어색합니다 서버에 이미 새로운 댓글이 생겼으니

 

댓글리스트 쿼리를 즉시 refetch해 새 댓글이 보이게 만듭니다

 

• 장바구니 담기 / 상품 주문
• 좋아요 / 팔로우 토글
• 관리자 /사용자 권한변경