리액트에서 useQuery를 사용하는 이유 & 예시

React에서 useQuery는 React Query 라이브러리에서 제공하는 custom hook 중 하나로, API 데이터를 가져오는데 유용하게 사용됩니다.

 

import { useQuery } from 'react-query';
import axios from 'axios';

function Users() {
  const { isLoading, error, data } = useQuery('users', () =>
    axios.get('https://jsonplaceholder.typicode.com/users')
  );

  if (isLoading) return 'Loading...';

  if (error) return `An error has occurred: ${error.message}`;

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

위 예시에서는 query key로 문자열 'users'를 사용했습니다. 이는 해당 쿼리가 가져오려는 데이터의 유형을 나타냅니다. 예를 들어, 만약 이 예시에서 query key를 'posts'로 변경하면, React Query는 https://jsonplaceholder.typicode.com/posts에서 데이터를 가져오려고 시도합니다.

 

따라서 query key는 React Query에서 캐시되는 데이터를 관리하기 위한 중요한 역할을 합니다. query key는 문자열, 숫자, 객체 등 다양한 형태로 사용할 수 있습니다. 하지만 query key가 변경되면 React Query는 항상 새로운 쿼리로 간주하여, 새로운 데이터를 가져오려고 시도합니다.

 

 React Query의 useQuery는 다음과 같은 이유로 많은 개발자들에게 선택되고 있습니다.

1. 선언적 데이터 가져오기 useQuery를 사용하면 선언적으로 데이터를 가져올 수 있습니다. 이는 React Query가 데이터 요청과 상태 관리를 대신 처리해주기 때문입니다. 데이터 요청 로직을 컴포넌트 밖으로 분리하여, 컴포넌트 코드를 더 간결하고 읽기 쉽게 만들어줍니다.
2. 캐시 관리 React Query는 내부적으로 캐시를 사용하여, 성능을 최적화합니다. 캐시를 사용함으로써, API 요청 수를 최소화하고, 사용자 경험을 향상시킬 수 있습니다.
3. 자동 재요청 React Query는 백그라운드에서 주기적으로 데이터를 가져와서, 새로운 데이터가 있는지 확인합니다. 데이터가 변경되면 자동으로 새로운 데이터를 가져옵니다. 따라서 개발자가 수동으로 새로 고침 버튼을 누를 필요가 없습니다.
4. 오류 처리 useQuery를 사용하면, 데이터 요청 중에 발생하는 모든 오류를 처리할 수 있습니다. 이를 통해, 애플리케이션에서 예상치 못한 오류를 처리하고, 오류 처리 로직을 작성할 필요가 없습니다.
5. 유연한 옵션 React Query는 다양한 옵션을 제공합니다. 예를 들어, 데이터 캐시 시간, 요청 캐시, 오류 재시도 등을 사용자가 직접 설정할 수 있습니다.

따라서, React Query의 useQuery는 선언적이면서도 강력한 API 데이터 관리를 제공하여, React 애플리케이션의 개발자들에게 많은 혜택을 제공합니다.

 

위 코드에서 사용된 useQuery hook의 옵션에 대한 설명은 다음과 같습니다.

1. 첫 번째 인자 (useGetUploadImages_${albumId}): 이 옵션은 쿼리의 고유 식별자인 query key를 나타냅니다. query key는 문자열, 숫자, 객체 등 다양한 형태로 사용할 수 있으며, 이를 이용해 React Query는 캐시된 데이터를 관리합니다. 위 예시에서는 albumId를 사용하여, 각 앨범에 대한 쿼리를 고유하게 식별할 수 있도록 하였습니다.
2. 두 번째 인자 (콜백 함수): 이 옵션은 데이터를 가져오는 함수를 나타냅니다. 위 예시에서는 fetch(albumId)를 사용하여, albumId에 해당하는 데이터를 가져오도록 하였습니다. 이 함수는 React Query 내부에서 요청이 필요할 때마다 호출됩니다.
3. 세 번째 인자 (객체): 이 옵션은 useQuery hook의 동작을 제어하는 다양한 옵션을 제공합니다.

• staleTime: 이 옵션은 데이터가 최근에 업데이트된 시간을 지정합니다. 이 시간 내에 데이터 요청이 이루어지면, React Query는 캐시된 데이터를 반환하고, 네트워크 요청을 하지 않습니다. 이 값을 0으로 설정하면, 항상 네트워크 요청을 수행합니다.
• cacheTime: 이 옵션은 데이터가 캐시될 시간을 지정합니다. 이 시간이 지나면, React Query는 데이터를 다시 가져와서 캐시를 업데이트합니다. 이 값을 0으로 설정하면, 데이터를 캐시하지 않습니다.
• enabled: 이 옵션은 쿼리가 활성화될지 여부를 나타냅니다. 이 값을 false로 설정하면, 쿼리가 비활성화됩니다. 위 예시에서는 !!albumId를 사용하여, albumId가 존재하는 경우에만 쿼리를 활성화하도록 하였습니다.