TanStack 쿼리 마스터하기: React에서 효율적인 데이터 가져오기를 위한 종합 가이드

최신 React 개발에서 효율적인 데이터 가져오기 및 상태 관리는 반응성이 뛰어나고 성능이 뛰어난 애플리케이션을 구축하는 데 매우 중요합니다. useEffect 및 useState와 같은 기존 도구는 데이터 가져오기를 처리할 수 있지만 특히 애플리케이션이 성장함에 따라 코드가 복잡하고 유지 관리하기 어려워지는 경우가 많습니다. 데이터 가져오기, 캐싱, 동기화 등을 단순화하는 강력한 라이브러리인 TanStack Query(이전의 React Query)를 입력하세요.

이 게시물에서는 TanStack Query가 무엇인지, TanStack Query 사용을 고려해야 하는 이유, React 애플리케이션에서 구현하는 방법에 대해 자세히 알아보겠습니다.

TanStack 쿼리란 무엇인가요?

TanStack Query는 React 및 기타 프레임워크를 위한 헤드리스 데이터 가져오기 라이브러리입니다. 복잡하고 중복되는 코드가 필요 없이 애플리케이션에서 서버 상태를 가져오고, 캐시하고, 동기화하고, 업데이트하는 도구를 제공합니다.

주요 기능:

• 데이터 캐싱: 데이터를 자동으로 캐시하고 오래될 때까지 재사용합니다.
• 자동 다시 가져오기: UI를 최신 상태로 유지하기 위해 백그라운드에서 데이터를 자동으로 다시 가져옵니다.
• 낙관적 업데이트: 낙관적 업데이트를 위한 메커니즘을 제공하여 반응형 UI를 보장합니다.
• 서버 측 렌더링: 서버 측 렌더링을 쉽게 지원합니다.
• 즉시 사용 가능한 Devtools: 쿼리 디버깅 및 모니터링을 위한 devtools가 포함되어 있습니다.

TanStack 쿼리를 사용하는 이유는 무엇입니까?

TanStack Query를 사용하면 React 애플리케이션의 데이터 가져오기 로직을 ​​대폭 단순화할 수 있습니다. 고려해야 할 몇 가지 이유는 다음과 같습니다.

• 보일러플레이트 코드 감소: useEffect를 사용하여 데이터를 가져오려면 로드 상태 관리, 오류 처리 및 다시 가져오기가 필요합니다. TanStack Query는 이러한 우려 사항을 추상화하여 핵심 기능에 집중할 수 있도록 합니다.

• 성능 향상: 캐싱, 백그라운드 다시 가져오기 및 중복 제거 기능을 갖춘 TanStack Query는 불필요한 네트워크 요청을 줄여 애플리케이션 성능을 향상시키는 데 도움이 됩니다.

• 복잡한 시나리오 처리: 페이지 매김, 무한 스크롤, 오래된 데이터 처리 등 TanStack Query는 복잡한 데이터 가져오기 요구 사항에 맞는 강력한 솔루션을 제공합니다.

React 애플리케이션에서 TanStack 쿼리를 사용하는 방법

React 프로젝트에서 TanStack 쿼리를 설정하고 이를 사용하여 API에서 데이터를 가져오는 과정을 살펴보겠습니다.

1단계: 설치

먼저 필요한 패키지를 설치하세요.

npm install @tanstack/react-query

TypeScript를 사용하는 경우 다음 유형도 설치해야 합니다.

npm install @tanstack/react-query @types/react

2단계: 쿼리 클라이언트 설정

애플리케이션에서 TanStack Query를 사용하기 전에 QueryClient를 설정하고 QueryClientProvider로 애플리케이션을 래핑해야 합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import App from './App';

// Create a client
const queryClient = new QueryClient();

ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  document.getElementById('root')
);

3단계: useQuery를 사용하여 데이터 가져오기

TanStack Query는 데이터를 가져오기 위해 useQuery 후크를 제공합니다. 이 후크는 쿼리 키와 약속을 반환하는 함수(일반적으로 API 호출)를 사용합니다.

다음은 API에서 데이터를 가져오는 예입니다.

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

const fetchPosts = async () => {
  const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts');
  return data;
};

function Posts() {
  const { data, error, isLoading } = useQuery(['posts'], fetchPosts);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error loading posts</div>;

  return (
    <div>
      {data.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
}

4단계: 쿼리 상태 처리

TanStack 쿼리를 사용하면 로드, 오류, 성공 등 쿼리의 다양한 상태를 쉽게 처리할 수 있습니다. isLoading, isError, isSuccess 및 useQuery에서 제공하는 기타 속성을 사용하여 쿼리 상태에 따라 렌더링되는 항목을 제어할 수 있습니다.

const { data, error, isLoading, isSuccess, isError } = useQuery(['posts'], fetchPosts);

if (isLoading) {
  return <div>Loading...</div>;
}

if (isError) {
  return <div>Error: {error.message}</div>;
}

if (isSuccess) {
  return (
    <div>
      {data.map(post => (
        <div key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
}

5단계: 낙관적인 업데이트

낙관적 업데이트를 사용하면 서버가 업데이트를 확인하기 전에 UI를 업데이트하여 보다 빠른 사용자 경험을 제공할 수 있습니다. 이는 TanStack 쿼리의 useMutation 후크를 사용하여 수행할 수 있습니다.

import { useMutation, useQueryClient } from '@tanstack/react-query';

const addPost = async (newPost) => {
  const { data } = await axios.post('https://jsonplaceholder.typicode.com/posts', newPost);
  return data;
};

function AddPost() {
  const queryClient = useQueryClient();

  const mutation = useMutation(addPost, {
    onMutate: async newPost => {
      await queryClient.cancelQueries(['posts']);

      const previousPosts = queryClient.getQueryData(['posts']);

      queryClient.setQueryData(['posts'], old => [...old, newPost]);

      return { previousPosts };
    },
    onError: (err, newPost, context) => {
      queryClient.setQueryData(['posts'], context.previousPosts);
    },
    onSettled: () => {
      queryClient.invalidateQueries(['posts']);
    },
  });

  return (
    <button onClick={() => mutation.mutate({ title: 'New Post', body: 'This is a new post.' })}>
      Add Post
    </button>
  );
}

결론

TanStack Query는 React 애플리케이션에서 서버 측 상태를 관리하는 방식을 크게 개선할 수 있는 강력한 도구입니다. 데이터 가져오기, 캐싱, 동기화 등을 처리함으로써 상태 관리의 복잡성으로 인해 방해받지 않고 기능 구축에 집중할 수 있습니다.

소규모 프로젝트를 구축하든 대규모 애플리케이션을 구축하든 관계없이 TanStack Query를 통합하면 더 깔끔하고 유지 관리하기 쉬운 코드와 더 나은 사용자 경험을 얻을 수 있습니다. 자동 다시 가져오기, 캐싱 및 낙관적 업데이트와 같은 기능을 갖춘 TanStack Query는 현대 React 개발자에게 없어서는 안될 도구입니다.

다음 프로젝트에서 TanStack Query를 사용해 보고 React에서 데이터를 가져오는 효율성과 단순성을 경험해보세요!

즐거운 코딩 ?‍?

위 내용은 TanStack 쿼리 마스터하기: React에서 효율적인 데이터 가져오기를 위한 종합 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!