Basic

Axios는 브라우저와 Node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트로, React 애플리케이션에서 API 통신을 위해 널리 사용됩니다.

GET 요청

axios.get('<https://api.example.com/users>', {
  params: {
    id: 123,
    category: 'review'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

POST 요청

axios.post('<https://api.example.com/users>', {
  username: 'user123',
  email: '[email protected]'
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

PUT 요청

axios.put('<https://api.example.com/users/123>', {
  username: 'updatedUser',
  email: '[email protected]'
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

DELETE 요청

axios.delete('<https://api.example.com/users/123>')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

async/await를 활용한 비동기 처리

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

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        setLoading(true);
        const response = await axios.get('<https://api.example.com/users>');
        setUsers(response.data);
        setError(null);
      } catch (err) {
        setError(err.message);
        setUsers([]);
      } finally {
        setLoading(false);
      }
    };

    fetchUsers();
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

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

export default UserList;

async/await를 사용하는 이유

Axios 인스턴스 활용

// api.js
import axios from 'axios';

const instance = axios.create({
  baseURL: '<https://api.example.com>',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json'
  }
});

export default instance;

사용 예