[React] TanStack-Query (React-Query)

🐣 들어가기 전에!_!

---

이번 게시물에서는 TanStack Query에 대해서 정리해 볼 것이다!_! 혹시 아직 React Query라고 알고 있는 가?! React Query는 2022년 8월에 TanStack Query로 변경되었다. 그 이유는 라이브러리가 React 외에도 Vue 및 Svelte와 같은 여러 프레임워크를 지원하도록 확장됨에 따라 React를 넘어 다양한 버전을 통합하고 더 광범위한 다중 프레임워크 유틸리티를 강조하는 것이기 때문!_! 

 

아무튼 이번 게시물에서는 프로젝트 설치 및 셋팅방법과 tanstack query 사용 이유 그리고 주요 함수에 대해서 살펴보고, 다음 게시물에서 tanstack query 사용법, query 동작 이해, 동적 query 함수 및 query key, 쿼리 활성화 비활성화 등을 차례차례 정리해보겠따!

 

TanStack img

TanStack Query

 

🐣 TanStack Query 사용하는 이유?

---

1. TanStack Query 란?

TanStack Query는 React, Vue 및 Svelte를 포함한 여러 프레임워크를 지원하는 데이터 가져오기 및 상태 관리 라이브러리. 최소한의 상용구를 사용하여 데이터 동기화, 캐싱 및 백그라운드 업데이트를 단순화 함. TanStack Query는 프레임워크 전반에 걸쳐 일관된 API를 제공하여 최신 웹 애플리케이션에서 서버 상태를 관리하는 데 다목적이고 효율적임.

 

TanStack Query의 가장 중요한 기능에는 자동 업데이트 및 백그라운드 다시 가져오기를 통해 데이터를 가져오고 캐시하는 useMutation과 강력한 오류 처리 및 낙관적 업데이트로 데이터 수정을 처리하는 useMutation이 포함 됨. 이러한 기능은 비동기식 데이터 관리를 간소화하여 지원되는 프레임워크 전반에 걸쳐 강력하고 일관된 API를 제공함.

 

2. 그래서 사용하는 이유는?

간단히 설명하면 아래와 같음.

refetch기능과 캐시처리가 편리!_! 
자동 캐싱, 동기화, 백그라운드 업데이트를 통해 서버 상태 관리를 단순화하여 효율성을 높인다규!

 

• React 내부에서 HTTP 편리하게 요청 가능
• 리액트 프로젝트에서 백엔드 연결 편리
• 프론트엔드 사용자 인터페이스를 백엔드 데이터와 동기화된 상태로 유지
  • 물론 반드시 tanstack이 필요한 것은 아님
  • 하지만 이용하면 코드 간결하고 편리

이렇게만 살펴보면 아마도 fetch 가 있는데 왜 굳이 tanstack-query를 사용할까? 라는 의문점이 생길 것임. 아래에서 fetch와 비교를 하여 살펴보겠음!

 

 

▷ fetch와 tanstack-query의 비교

(코드) 기존에 useEffect와 fetch를 이용한 방법은 아래와 같음

import { useEffect, useState } from 'react';

import LoadingIndicator from '../UI/LoadingIndicator.jsx';
import ErrorBlock from '../UI/ErrorBlock.jsx';
import EventItem from './EventItem.jsx';

export default function NewEventsSection() {
  const [data, setData] = useState();
  const [error, setError] = useState();
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    async function fetchEvents() {
      setIsLoading(true);
      const response = await fetch('http://localhost:3000/events');

      if (!response.ok) {
        const error = new Error('An error occurred while fetching the events');
        error.code = response.status;
        error.info = await response.json();
        throw error;
      }

      const { events } = await response.json();

      return events;
    }

    fetchEvents()
      .then((events) => {
        setData(events);
      })
      .catch((error) => {
        setError(error);
      })
      .finally(() => {
        setIsLoading(false);
      });
  }, []);

  let content;

  if (isLoading) {
    content = <LoadingIndicator />;
  }

  if (error) {
    content = (
      <ErrorBlock title="An error occurred" message="Failed to fetch events" />
    );
  }

  if (data) {
    content = (
      <ul className="events-list">
        {data.map((event) => (
          <li key={event.id}>
            <EventItem event={event} />
          </li>
        ))}
      </ul>
    );
  }

  return (
    <section className="content-section" id="new-events-section">
      <header>
        <h2>Recently added events</h2>
      </header>
      {content}
    </section>
  );
}

 

• useEffect 내에서 fetch 돌리고, useState의 data에 담아주고, error 랑isLoading을 통해서 상태 표시 해주고~ 등
• 사실 나는 위 코드가 더 익숙하지만, 이 코드는 데이터를 가져올 때 매번 긴 코드를 작성해야 함. 물론 커스텀 훅으로 만들거나 할 경우 코드를 간소화하거나 재사용할 수 있음(뭐 예를들면 useHTTP)
• 그렇지만 아래와 같은 기능들의 부족함이 있는데,
  1. 하지만 다른 탭으로 이동한 후 다시 웹사이트로 돌아왔을 때, refetch가 되지 않음(동작을 효율적 구현 위해서는 코드 추가 필요)
  2. 캐시처리 - 가져온 데이터 캐시처리하고, 메모리 저장 후, 필요할 때 다시 사용

 

🐣 프로젝트 설치 및 셋팅

---

1. 설치

https://tanstack.com/query/latest/docs/framework/react/overview

Overview | TanStack Query React Docs

 

위의 홈페이지에서 latest로 설치하면 편리

npm i @tanstack/react-query

 

참고로 5버전을 사용하고 있음.

 

 

App() 컴포넌트에 wrapping

react-query와 useQuery 훅을 사용하려면 해당 기능을 사용할 component를 tanstack-query가 제공하는 provider component로 감싸야 함.

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

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />;
    </QueryClientProvider>
  );
}

 

 

🐣 TanStack Query의 주요 구성 요소

---

1. useQuery

데이터를 가져오고 캐시하여 자동으로 서버와 동기화하고 필요에 따라 백그라운드에서 업데이트. 수동 데이터 가져오기 논리의 필요성을 최소화하여 상태 관리를 더욱 간단하고 효율적으로 만듦.

 

2. useMutation

내장된 오류 처리 및 낙관적 업데이트를 통해 생성, 업데이트 또는 삭제 작업을 수행하여 데이터 수정을 관리. useMutation  사용하면 비동기 작업 중에 UI의 응답성과 일관성이 유지 가능.

 

2. QueryClient

쿼리 및 변형의 구성 및 관리를 중앙 집중화하여 쿼리 캐시를 조작하고 검사하는 방법을 제공. 캐싱 정책, 쿼리 무효화 및 백그라운드 다시 가져오기에 대한 전역 제어를 용이하게 가능.

 

---

 

다음 게시물에서는 기본적인 tanstack-query
사용법에 대해 다뤄보겠다(useQuery, isPending, isError, error 등)