🤔 Tanstack Query가 왜 필요하죠?

사실 우리 프로젝트 특성상 핵심 기능이 실시간 스트리밍과 채팅이기 때문에 tanstack query의 도입이 필수적이지는 않다. 그렇지만 기존의 상태 관리 라이브러리와 다르게 서버 상태 관리를 위해 태어난 Tanstack Query는 “어떤 것일까?”, “어떤 장점이 있을까?”를 직접 사용해보며 알아보려고 도입했다.

Tanstack Query 학습 정리: Tanstack query

🎯 기대 효과

1️⃣ 데이터 캐싱

시청 시 방송자 정보, 프로필 등에서 API 요청이 사용되고 있다. 이런 부분은 잘 변경이 되지 않는 데이터들이므로 데이터 캐싱을 하는 것이 효율적일 것이라고 생각된다.

2️⃣ useInfiniteQuery와 react-intersection-observer 라이브러리를 이용해 무한 스크롤 로직 개선

현재 메인페이지에서는 방송 중인 목록을 무한 스크롤로 제공하고 있다. 이 부분에 useInfiniteQuery와 react-intersection-observer 라이브러리를 사용한다면 코드를 좀 더 간결하고 가독성 있게 바꿀 수 있을 것이라고 기대된다.

🧰 Tanstack Query 도입 과정

1️⃣ Tanstack Query 설치 및 구성

Tanstack Query와 dev tools 설치

pnpm add @tanstack/react-query @tanstack/react-query-devtools

ESLint Plugin Query 설치

pnpm add -D @tanstack/eslint-plugin-query

.eslintrc에 플러그인 추가

{
	"plugins":["@tanstack/query"],
	"extends": ["plugin:@tanstack/query/recommended"],
	"rules": {
    "@tanstack/query/exhaustive-deps": "error",
    "@tanstack/query/stable-query-client": "error",	
	}
}

react-intersection-observer 설치
```
pnpm add react-intersection-observer
```
무한 스크롤을 구현할 때 useIntersect라는 커스텀 훅을 만들어서 뷰포트 내로 참조된 컴포넌트가 들어왔는지 확인했었는데, 이것을 react-intersection-observer 라이브러리의 useInView 훅으로 바꿔서 사용해보려고 설치했다.

2️⃣ Tanstack Query 초기 설정하기

다 설치를 했으면 데이터 캐싱이 적용될 범위를 <QueryClientProvider>로 감싸면 된다. 현재 루트 요소와 라우터는 아래와 같이 설정되어 있다.

// main.tsx

import { createRoot } from 'react-dom/client';
import './index.css';
import { RouterProvider } from 'react-router-dom';
import { router } from '@/app/routes';

createRoot(document.getElementById('root')!).render(<RouterProvider router={router} />);

export const router = createBrowserRouter(
  [
    {
      path: '/',
      element: <Layout />,
      children: [
			  // ...
      ],
    },
    {
      path: 'broadcast',
      element: <ProtectedRoute />,
      children: [
        {
          path: '',
          element: (
            <Suspense fallback={<LoadingCharacter />}>
              <BroadcastPage />
            </Suspense>
          ),
        },
      ],
    },
  ],
  routerOptions,
);

우리 프로젝트는 라우터에 모든 컴포넌트를 공통으로 감싸는 요소가 없다. 그래서 app 레이어에 App 컴포넌트를 만들고, 다음과 같이 구현했다.

App.tsx