React Query를 활용한 데이터 Fetching과 Mutation 사용법

React Query 사용 방법을 잊지 않기 위해 쓴 글입니다. 특히, useQuery와 useMutation 훅을 사용하여 데이터를 가져오고 업데이트하는 방법에 초점을 맞출 것입니다.

React Query란?

안녕하세요! 이번 블로그 글에서는 React Query를 활용하여 데이터를 가져오고 변경하는 방법에 대해 알아보겠습니다. React Query는 React 애플리케이션에서 서버로부터 데이터를 가져오고 캐시하여 관리하는 데 사용되는 라이브러리입니다. 이를 통해 개발자는 쉽게 비동기 데이터를 다룰 수 있으며, 요청의 중복을 피하고 최신 데이터를 유지할 수 있습니다.

React Query를 사용하는 이유

React Query를 사용하면 여러 가지 장점을 누릴 수 있습니다.

1. 캐싱과 자동 리프레시: React Query는 데이터를 캐싱하고 요청을 자동으로 리프레시하여 최신 정보를 유지합니다.

2. 오류 처리: 네트워크 오류 또는 재시도 시도와 같은 오류 처리 기능을 제공하여 안정성을 높입니다.

3. 데이터 페칭 로직 분리: 데이터 페칭 로직을 컴포넌트 외부로 분리하여 코드를 더 깔끔하고 관리하기 쉽게 만듭니다.

4. 오프라인 모드 지원: 오프라인 상태에서도 캐시된 데이터를 활용하여 사용자 경험을 향상시킵니다.

이제 각각의 훅인 useQuery와 useMutation을 사용한 데이터 페칭과 변경에 대해 살펴보겠습니다.

useQuery로 데이터 가져오기

useQuery 훅은 데이터를 가져오는 데 사용됩니다. 이를 사용하면 API 엔드포인트로부터 데이터를 쉽게 불러올 수 있습니다.

import { useQuery } from 'react-query';

const fetchData = async () => {
  const response = await fetch('API_URL');
  return response.json();
};

const MyComponent = () => {
  // key와 함수를 useQuery에 등록함.
  const { data, isLoading, error } = useQuery('myData', fetchData);

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

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

  return (
    <div>
      {/* data 사용 */}
      {data.map(item => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
};

useQuery를 사용하면 'myData'라는 키로 데이터를 캐싱하고, 데이터를 가져오는 동안 로딩 상태와 오류를 처리할 수 있습니다.

useMutation으로 데이터 업로드 및 가져오기

useMutation 훅은 데이터를 변경하기 위해 사용됩니다. 일반적으로 POST, PUT, DELETE 요청을 처리하는 데 사용합니다.

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

const uploadData = async (newData) => {
  const response = await fetch('API_URL', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(newData),
  });

  return response.json();
};

const MyUploadComponent = () => {
  const queryClient = useQueryClient();
  //useMutation에 데이터를 변경(POST, PUT, DELETE)하는 함수를 등록
  const mutation = useMutation(uploadData, {
    // 데이터 업로드 성공 시 실행
    onSuccess: () => {
      // 업로드 이후 데이터를 다시 가져오기 위해 key로 캐시된 데이터 무효화
      queryClient.invalidateQueries('myData');
    },
  });

  const handleUpload = () => {
    const newData = { name: 'New Item' };
    // 데이터 업로드를 위해 mutate 사용. 데이터 업로드 성공 시 onSuccess 실행
    mutation.mutate(newData);
  };

  return (
    <div>
      <button onClick={handleUpload}>Upload Data</button>
    </div>
  );
};

위 예시에서는 useMutation을 사용하여 데이터를 업로드하고, 업로드가 성공하면 캐시된 데이터를 무효화하여 최신 데이터를 보여줄 수 있습니다.

마무리

이제 React Query를 사용하여 useQuery와 useMutation 훅을 활용하여 데이터를 가져오고 업로드하는 방법에 대해 알아보았습니다. React Query는 강력한 기능과 간편한 API를 제공하여 비동기 데이터 관리를 용이하게 해줍니다. 캐싱, 자동 리프레시, 오류 처리 등의 기능으로 애플리케이션의 성능과 안정성을 향상시킬 수 있습니다.

반복적이고 복잡한 데이터 페칭과 관련된 작업을 React Query로 대체하면 코드가 간결해지고 유지보수가 쉬워집니다. 이러한 라이브러리를 이용하여 좀 더 좋은 개발 경험을 가져가고 성공적으로 프로젝트를 진행할 수 있기를 기원합니다!