#TIL 41일차(Tanstack Query)

---

Tanstack Query란?

Tanstack Query(이전 이름: React Query)는 React 애플리케이션에서 서버 상태를 관리하기 위한 라이브러리이다. 서버에서 데이터를 가져오고 캐싱, 동기화, 업데이트, 그리고 UI 상태 관리를 쉽게 할 수 있도록 도와준다.

Tanstack Query 주요 기능

• 데이터 패칭 및 캐싱

  • 동일한 데이터를 여러 번 요청하지 않도록 캐싱하여 성능을 향상시킨다.

• 자동 리페칭

  • 데이터가 변경되었을 때 자동으로 리페칭하여 최신 상태를 유지합니다.

• 쿼리 무효화와 재요청

  • 특정 이벤트가 발생했을 때 쿼리를 무효화하고 데이터를 다시 가져올 수 있다.

설치 및 기본 사용법

📍 설치 명령어

$ npm i @tanstack/react-query
or
$ yarn add @tanstack/react-query

📍 기본 사용법

1. QueryClient 설정

import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import UserList from './UserList';
const queryClient = new QueryClient();
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <UserList />
    </QueryClientProvider>
  );
}
export default App;

2. 사용자 목록 가져오기 (useQuery 사용)

import React from 'react';
import { useQuery } from '@tanstack/react-query';
import axios from 'axios';
const fetchUsers = async () => {
  const { data } = await axios.get('https://jsonplaceholder.typicode.com/users');
  return data;
};
function UserList() {
  const { data, error, isLoading } = useQuery(['users'], fetchUsers);
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}
export default UserList;

• useQuery
  • fetchUsers라는 함수를 사용하여 서버에서 데이터를 가져온다.
  • useQuery는 데이터 로딩, 성공, 실패 상태를 쉽게 관리할 수 있게 해준다.
• isLoading
  • 데이터 로딩 중일 때 로딩 메시지를 표시한다.
• error
  • 데이터 패칭에 실패했을 때 에러 메시지를 표시한다.
• 데이터 표시
  • 데이터 패칭이 성공하면, 사용자 목록을 화면에 표시한다.

Tanstack Query를 사용하는 이유

• 단순성
  • 서버 상태 관리와 데이터 패칭 로직을 크게 단순화하여, 복잡한 상태 관리 코드를 줄일 수 있다.
• 성능
  • 데이터 캐싱, 백그라운드 갱신, 쿼리 무효화 등으로 성능을 최적화할 수 있다.
• 확장성
  • 다양한 애플리케이션 크기와 복잡성에 맞게 쉽게 확장할 수 있다.