프론트엔드 노트

React Query는 React 애플리케이션에서 서버 상태를 관리하는 데 매우 유용한 라이브러리입니다. API 호출, 캐싱, 비동기 데이터 처리 등을 간편하게 처리할 수 있도록 도와주며, 복잡한 상태 관리를 단순화해줍니다. 이번 포스트에서는 React Query를 사용하여 API 데이터를 관리하고 상태를 처리하는 방법을 살펴보겠습니다.

React Query 설치

React Query를 프로젝트에 설치하기 위해 npm 또는 yarn을 사용할 수 있습니다. 아래의 명령어를 통해 설치합니다.

npm install @tanstack/react-query

혹은

yarn add @tanstack/react-query

React Query Provider 설정

React Query를 사용하기 위해서는 먼저 QueryClient와 QueryClientProvider로 애플리케이션을 감싸주어야 합니다. 아래는 기본적인 설정 예제입니다.

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

const queryClient = new QueryClient();

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

API 호출 및 데이터 가져오기

이제 React Query를 사용하여 API에서 데이터를 가져오는 방법을 살펴보겠습니다. 아래 예제에서는 JSONPlaceholder API를 사용하여 사용자 정보를 가져오는 방법을 보여줍니다.

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

const fetchUsers = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

const UsersList = () => {
  const { data, error, isLoading } = useQuery(['users'], fetchUsers);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>An error occurred: {error.message}</div>;

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UsersList;

위 코드에서 useQuery 훅은 세 가지 상태 (data, error, isLoading)를 반환합니다. 이 상태를 사용해 로딩 중, 에러 발생 시, 데이터를 성공적으로 가져왔을 때의 UI를 구성할 수 있습니다.

데이터 캐싱 및 자동 리패칭

React Query는 기본적으로 데이터를 캐싱하고, 데이터가 업데이트될 때 자동으로 다시 패칭합니다. 이를 통해 비동기 데이터의 일관성을 유지할 수 있습니다. useQuery 훅은 두 번째 인자로 옵션 객체를 받을 수 있습니다.

const { data, error, isLoading } = useQuery(['users'], fetchUsers, {
  staleTime: 1000  60  5, // 5분 동안 데이터 캐시
  refetchOnWindowFocus: true, // 창 포커스 시 데이터 자동 리패칭
});

위와 같은 설정은 데이터가 일정 시간 동안 신선하게 유지되도록 하며, 사용자가 창에 다시 포커스를 맞출 때 자동으로 데이터를 업데이트합니다.

데이터 뮤테이션

API를 통해 데이터를 수정하거나 추가하는 작업은 useMutation 훅을 사용하여 처리합니다. 아래 예제는 새로운 사용자 추가를 구현한 것입니다.

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

const addUser = async (newUser) => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(newUser),
  });
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

const AddUser = () => {
  const mutation = useMutation(addUser, {
    onSuccess: () => {
      // 성공하면 사용자 목록을 리패칭하거나 알림을 표시
    },
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    const newUser = { name: 'New User' }; // 사용자 데이터
    mutation.mutate(newUser);
  };

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Add User</button>
    </form>
  );
};

useMutation 훅은 데이터 추가, 수정, 삭제 등의 작업을 간편하게 처리할 수 있습니다. onSuccess 콜백을 사용하여 성공적인 요청 후 추가 작업을 수행할 수 있습니다.

마무리

이번 포스트에서는 React Query를 사용하여 API 데이터 관리 및 상태 처리를 수행하는 방법에 대해 알아보았습니다. React Query는 비동기 데이터 처리에 필요한 많은 기능을 제공하여, 복잡한 상태 관리에서 벗어나 애플리케이션을 더 간결하고 효율적으로 만들 수 있도록 도와줍니다. 다양한 옵션을 활용하여 자신의 요구에 맞는 데이터 관리를 구현해보시기 바랍니다.

React Query로 API 데이터 관리 및 상태 처리 튜토리얼

React Query 설치

React Query Provider 설정

API 호출 및 데이터 가져오기

데이터 캐싱 및 자동 리패칭

데이터 뮤테이션

마무리