[spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(6) tanstack query 설정

[이전글] 2024.08.09 - [👩🏻‍💻 dev] - [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(5) react router 설정

[spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(5) react router 설정

이전 포스팅에는 클라이언트 사이드 라우팅을 가능케 하는 react router 설정을 하는 방법에 대해 다뤘다.
앱 전체를 감싸주기 위해 Provider로 감싸줬었는데, 오늘은 이 최상단에 감싸줄 TanstackQuery 설정을 해주자.

👩🏻‍💻 Tanstack query가 뭔지, 왜 쓸지, 설정해 주는 방법 등에 대해 살펴보자.

Tanstack Query란

이전부터 (이젠 tanstack query로 개명한) reactquery를 써봤지만 쓰는 이유에 대해서는 정리를 따로 하지 않았던 것 같다.

이전에는 바로 axios를 쓰거나 fetch로 데이터를 가져왔었지만, 이제는 tanstack query를 안 쓰는 게 어색한 느낌이 들 정도다.

 

이번에는 조금 새로워진 tanstack query가 무엇인지 살펴보고, 어떤 이유에서 손이 계속 가게 되었는지 정리하고자 한다.

 

Tanstack query은 크게 다음의 기능들을 지원하는 data-fetching 라이브러리다.

• fetching
• 캐싱
• 서버 상태와 싱크 맞추고 업데이트

대부분의 웹 프레임워크들은 fetch하는 방식 또는 데이터 업데이트 방식이 opinionated이거나 holistic(유기적)이지 않다.

그래서 개발자들은 data-fetching에 대한 엄격한 기준들을 갖춘 meta-framework들을 직접 만들거나, 자신 만의 data fetching  방법을 만들어내서 사용한다.

 

하지만 이런 식으로 데이터를 관리하게 되면, 컴포넌트 기반의 state과 side-effect이 뒤엉켜 있거나,

일반적인 state 관리 라이브러리로 비동기 데이터를 저장하고 제공하는 방식을 활용하는 방식이 된다.

 

클라이언트 사이드 상태를 관리하는데에는 전통적인 상태관리 라이브러리가 효율적이지만 비동기(async)나 서버 상태의 관리에는 부적절하다. 이는 서버와 클라이언트 사이드의 state가 정말 다르기 때문이다.

 

서버 상태는 

• 개발자가 알거나 제어가능하지 않은 곳에서 유지될 수 있다.
• fetch나 update을 위해 비동기 api가 필요하다.
• "공유"된다는 건 개발자가 모르는 사이에 다른 사람들이 변경할 수 있다.
• 주의를 하지 않으면 잠재적으로 "out of date (최신이 아닌 상태)"가 될 수 있다.

뿐만 아니라 서버 상태는 다음과 같은 과제들도 해결해야 한다는 점에서 더 까다롭다:

• 캐싱(caching) 
•  여러 중복 요청을 한 번의 요청으로 줄이기(Deduping)
• 백그라운드에서 최신이 아닌 데이터를 업데이트하기
• 최대한 빨리 업데이트 버전으로 데이터를 반영하기
• 페이징(pagination)과 lazy loading 데이터와 같은 성능 최적화
• 메모리 관리와 서버 상태의 가비지 컬렉션
• structural sharing으로 쿼리 결과 메모이제이션

Tanstack 쿼리를 통해

• 복잡하고 많은 량의 코드를 react query 로직 몇 줄로 줄일 수 있다.
• 새로운 서버 상태 데이터 소스를 걱정하지 않고도 관리하기 쉬운 방식으로 새 기능을 추가할 수 있다.
• 직접 유저 끝단에 영향을 가해서 반응성이 좋은 앱 경험을 제공할 수 있다.
• 잠재적으로 bandwidth와 메모리 관리에 도움을 줄 수 있다.

이번 프로젝트에서 tanstack query를 통해서 예상 가능한 장점들은 

• 백그라운드에서 현재 재생 곡에 대한 요청을 할 경우, 해당 노래에 대한 가사를 가져오는 api가 실패할 수 있다 (해당 노래에 가사가 없는 경우, 노래 검색 키워드가 잘못될 경우 등). 계속 검색을 하는 게 아니라, 실패 횟수가 이하로만 요청을 하도록 tanstack query로직으로 간단히 처리할 수 있다.
• 무한 스크롤링 로직 간소화
• 데이터 캐싱, 이전 데이터 보존 : 아티스트 검색 등의 페이지는 검색어를 입력하면 요청하는 동안 여백을 보여주기보다는 다음 데이터를 fetch해와서 보여줄 때까지 유지하는 방식으로 제공하여, 유저 경험을 개선할 수 있다.

간단하게 tanstack query가 어떤 기능들을 제공할 지에 대해 살펴봤다. 이제 tanstack 쿼리를 사용하기 위한 기본 설정들을 해보자.

Tanstack Query 사용

설치

yarn add @tanstack/react-query

tanstack query dev tools, 화면 우측하단 가장자리에 우측과 같은 버튼이 있는데 클릭시 좌측과 같이 디버깅에 활용할 개발도구를 볼 수 있다.

 

개발 도구도 설치해주자.

번들될 때 process.env.NODE_ENV==='development'일 경우에만 포함되므로 프로덕션 빌드에 포함될 걱정은 안 해도 되지만, next+13에서 app 경로 사용 시 dev dependency로 설정해야 한고 한다. dev 환경에만 쓰기 때문에 리액트 only 프로젝트지만 일관성 있게 dev dependency로 설정하기로 했다.

yarn add @tanstack/react-query-devtools --save-dev

• tanstackQuery.tsx : 최상단을 쿼리 클라이언트로 감싸줘서 접근 가능하도록 한다.
  • 이때 queryClient의 기본 옵션을 설정할 수 있는데, 쿼리 staleTime (fresh 함을 유지할 시간)을 60*100로 설정해 줬다.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { ReactNode } from 'react';

const queryClient = new QueryClient({
  defaultOptions: { queries: { staleTime: 60 * 100 } },
});

const isDevEnvironment = import.meta.env.DEV;

const TanstackQuery = ({ children }: { children: ReactNode }) => {
  return (
    <QueryClientProvider client={queryClient}>
      {children}
      {isDevEnvironment && <ReactQueryDevtools />}
    </QueryClientProvider>
  );
};

export default TanstackQuery;

• providers/index.ts : 저번 포스팅에 만들어준 라우터를 감싸준다.

import Router from './router';
import TanstackQuery from './tanstackQuery';

const Providers = () => {
  return (
    <TanstackQuery> 
      <Router />
    </TanstackQuery>
  );
};

export default Providers;

 

---

 

https://tanstack.com/query/latest

TanStack Query