axios 라이브러리 소개

axios는 브라우저와 Node.js에서 사용할 수 있는 Promise 기반의 HTTP 클라이언트 라이브러리입니다.

간편한 API와 다양한 기능을 제공하여 HTTP 요청을 쉽게 처리할 수 있게 해줍니다.

axios 특징

Promise 기반 API
요청과 응답 인터셉터
자동 요청 및 응답 데이터 변환
클라이언트 사이드 보호 기능 (XSRF 등)
요청 취소 기능
JSON 데이터 자동 변환

설치 방법

npm을 사용하여 axios를 설치할 수 있습니다.

npm install axios

기본 사용법

axios를 import하고 다양한 HTTP 메서드를 사용할 수 있습니다.

import axios from 'axios';
 
// GET 요청
axios.get('https://api.example.com/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });
 
// POST 요청
axios.post('https://api.example.com/users', {
  name: 'John Doe',
  email: '[email protected]'
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

axios를 사용한 다양한 HTTP 요청

GET 요청

axios.get('https://api.example.com/users', {
  params: {
    id: 12345
  }
})
  .then(response => {
    console.log(response.data);
  });

POST 요청

axios.post('https://api.example.com/users', {
  name: 'John Doe',
  email: '[email protected]'
})
  .then(response => {
    console.log(response.data);
  });

PUT 요청

axios.put('https://api.example.com/users/12345', {
  name: 'Jane Doe'
})
  .then(response => {
    console.log(response.data);
  });

DELETE 요청

axios.delete('https://api.example.com/users/12345')
  .then(response => {
    console.log(response.data);
  });

요청과 응답 인터셉터

인터셉터를 사용하면 요청이나 응답을 그 처리 직전에 가로채 작업을 수행할 수 있습니다.

// 요청 인터셉터
axios.interceptors.request.use(
  config => {
    // 요청 전에 수행할 작업
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);
 
// 응답 인터셉터
axios.interceptors.response.use(
  response => {
    // 응답 데이터를 처리
    return response;
  },
  error => {
    if (error.response.status === 401) {
      // 인증 에러 처리
    }
    return Promise.reject(error);
  }
);

axios 인스턴스 생성과 사용

axios 인스턴스를 생성하여 기본 설정을 커스터마이즈할 수 있습니다.

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {'X-Custom-Header': 'foobar'}
});
 
api.get('/users')
  .then(response => {
    console.log(response.data);
  });

fetch API와 axios의 차이점

자동 JSON 변환 : axios는 응답 데이터를 자동으로 JSON으로 변환합니다.
광범위한 브라우저 지원 : axios는 구형 브라우저를 더 잘 지원합니다.
요청 취소 : axios는 요청 취소 기능을 제공합니다.
오류 처리 : axios는 네트워크 오류를 자동으로 거부된 Promise로 처리합니다.
인터셉터 : axios는 요청과 응답을 위한 인터셉터를 제공합니다.
타임아웃 설정 : axios에서는 요청 타임아웃을 쉽게 설정할 수 있습니다.

axios를 사용할 때의 장점

간결한 API : 코드가 더 읽기 쉽고 유지보수가 용이합니다.
자동 변환 : 요청 및 응답 데이터의 자동 변환으로 코드가 간결해집니다.
오류 처리 : 네트워크 오류를 쉽게 처리할 수 있습니다.
인터셉터 : 요청과 응답을 전역적으로 수정할 수 있습니다.
취소 기능 : 불필요한 네트워크 요청을 취소할 수 있습니다.

React 프로젝트에서 axios 효율적으로 사용하기

인스턴스 생성 : 프로젝트의 기본 설정을 가진 axios 인스턴스를 생성합니다.

// api.js
import axios from 'axios';
 
const api = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
  timeout: 5000,
});
 
export default api;

커스텀 훅 생성 : axios를 사용하는 커스텀 훅을 만들어 재사용성을 높입니다.

// useApi.js
import { useState, useEffect } from 'react';
import api from './api';
 
function useApi(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    api.get(url)
      .then(response => {
        setData(response.data);
        setLoading(false);
      })
      .catch(error => {
        setError(error);
        setLoading(false);
      });
  }, [url]);
 
  return { data, loading, error };
}
 
export default useApi;

컴포넌트에서 사용

import React from 'react';
import useApi from './useApi';
 
function UserList() {
  const { data, loading, error } = useApi('/users');
 
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
 
  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}
 
export default UserList;

axios는 강력하고 유연한 HTTP 클라이언트 라이브러리로, React 프로젝트에서 데이터 페칭을 효율적으로 처리할 수 있게 해줍니다.

기본적인 Promise 기반 API부터 고급 기능인 인터셉터와 인스턴스 생성까지, axios는 다양한 상황에 대응할 수 있는 도구를 제공합니다.

fetch API와 비교했을 때, axios는 더 풍부한 기능과 간결한 사용법을 제공합니다. 특히 자동 JSON 변환, 광범위한 브라우저 지원, 오류 처리의 용이성 등은 개발 생산성을 크게 향상시킬 수 있습니다.

React 프로젝트에서 axios를 효율적으로 사용하기 위해서는 전역 설정을 가진 인스턴스를 생성하고, 이를 커스텀 훅과 함께 사용하는 것이 좋습니다. 이렇게 하면 코드의 재사용성을 높이고, 데이터 페칭 로직을 컴포넌트로부터 분리하여 관리할 수 있습니다.

그러나 axios 사용 시 주의할 점도 있습니다. 예를 들어, 불필요한 요청을 피하기 위해 요청 취소 기능을 적절히 사용해야 하며, 대규모 애플리케이션에서는 캐싱 전략을 고려해야 할 수 있습니다.

또한, 보안을 위해 인터셉터를 사용하여 모든 요청에 인증 토큰을 첨부하는 등의 전략을 사용할 수 있습니다.

로딩 상태와 에러 처리 실습