[React] axios 와 useQuery (api 통신)

axios와 useQuery는 각각 다른 상황에 더 유용하게 사용할 수 있는 라이브러리 및 훅입니다.

📌 axios

• axios는 네트워크 요청을 처리하는 데 강력한 도구입니다.

• 주로 서버와의 통신, REST API 호출, 외부 데이터 요청 등에 사용됩니다.

• 복잡한 요청이나 다양한 상황에서 더 많은 제어를 필요로 할 때 유용합니다.

• 요청 및 응답의 인터셉트, 헤더 설정, 인증 처리 등을 수행할 수 있습니다.

axios를 사용한 TypeScript 코드

import React, { useState, useEffect } from 'react';
import axios from 'axios';

interface User {
  id: number;
  name: string;
}

function UserListAxios() {
  const [users, setUsers] = useState<User[]>([]);

  useEffect(() => {
    async function fetchUsers() {
      try {
        const response = await axios.get<User[]>('https://api.example.com/users');
        setUsers(response.data);
      } catch (error) {
        console.error('Error fetching users:', error);
      }
    }

    fetchUsers();
  }, []);

  return (
    <div>
      <h1>User List using Axios</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserListAxios;

---

📌 useQuery (React Query 라이브러리의 기능)

• useQuery는 React Query 라이브러리에 내장된 훅으로, 데이터 관리 및 캐싱에 유용합니다.

• 주로 컴포넌트의 데이터 요청 및 캐싱 관리를 간편하게 할 때 사용됩니다.

• 빠른 데이터 갱신, 자동 재요청, 캐시 관리 등을 자동으로 처리합니다.

• 데이터를 가져오는 동안 로딩 및 에러 상태를 자동으로 관리합니다.

useQuery를 사용한 TypeScript 코드 (React Query)

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

interface User {
  id: number;
  name: string;
}

const UserListUseQuery: React.FC = () => {
  const { data: users, isLoading, isError } = useQuery<User[]>('users', async () => {
    try {
      const response = await axios.get<User[]>('https://api.example.com/users');
      return response.data;
    } catch (error) {
      throw new Error('Error fetching users');
    }
  });

  return (
    <div>
      <h1>User List using useQuery and Axios</h1>
      {isLoading ? (
        <p>Loading...</p>
      ) : isError ? (
        <p>Error fetching users</p>
      ) : (
        <ul>
          {users.map((user) => (
            <li key={user.id}>{user.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default UserListUseQuery;

외부 API에서 사용자 목록을 가져오고 표시하는 예시 코드로 두 예시 모두 데이터를 가져오지만, useQuery를 사용한 코드에서는 데이터를 자동으로 캐싱하고 로딩 및 에러 상태를 관리하는 부분을 라이브러리가 처리해주기 때문에 더 간결하고 편리합니다.

useQuery는 내부적으로 useEffect를 사용하여 데이터를 가져오고 관리합니다. 따라서 별도로 useEffect를 사용하여 데이터를 가져올 필요가 없습니다. useQuery는 데이터를 관리하고 갱신하는 데에 더 간편한 방법을 제공합니다.

🧐 상황에 따라 유용한 라이브러리

• axios는 서버와의 복잡한 통신이 필요한 경우나 다양한 인증, 헤더 설정 등을 다룰 때 유용합니다.

• useQuery는 컴포넌트 내에서 데이터를 가져오고 관리해야 할 때, 특히 UI와 상태 관리를 간편하게 하고자 할 때 유용합니다. React Query의 자동 캐싱 및 데이터 갱신 기능을 활용하면 데이터 관리를 효율적으로 할 수 있습니다.

두 라이브러리는 상황에 따라 조합해서 사용할 수도 있습니다. 예를 들어, axios로 외부 데이터를 가져온 다음, 그 데이터를 useQuery로 관리하거나 캐싱할 수 있습니다. 상황과 프로젝트의 요구에 따라 적절한 라이브러리를 선택하여 사용하면 됩니다.