React

Axios, AxiosInstance

Axios, AxiosInstance

Axios란?

Axios는 브라우저와 Node.js 환경에서 사용할 수 있는 HTTP 클라이언트 라이브러리다. Axios는 Promise 기반의 API를 제공하므로, 비동기 HTTP 요청을 간결하고 읽기 쉬운 코드로 작성할 수 있다. 이는 백엔드와의 통신을 더욱 효율적으로 만들어주며, 웹 애플리케이션 개발에서 Ajax 요청을 처리하는 데 널리 사용된다.

Axios의 주요 특징

  • Promise 기반: Axios는 Promise를 사용하여 비동기 요청을 처리한다. 이를 통해 콜백 지옥(callback hell) 문제를 해결하고 코드의 가독성을 높일 수 있다.
  • 브라우저와 Node.js 지원: Axios는 브라우저 뿐만 아니라 Node.js 환경에서도 사용할 수 있어, 프론트엔드와 백엔드 모두에서 HTTP 요청을 처리할 때 유용하다.
  • 요청 및 응답 인터셉트: Axios는 요청이나 응답을 가로채어 전처리 및 후처리를 할 수 있는 인터셉터 기능을 제공한다.
  • 요청 취소: 진행 중인 요청을 취소할 수 있는 기능을 제공한다.
  • 자동 JSON 변환: 요청 데이터를 자동으로 JSON으로 변환하고, 응답 데이터를 JSON 객체로 자동 파싱한다.

Axios 설치 및 사용 예

Axios를 설치하기 위해서는 npm이나 yarn을 사용할 수 있다. 프로젝트에 Axios를 추가하려면 다음 명령어를 실행한다
npm install axios

yarn add axios

Axios로 GET 요청하기

import axios from 'axios';

axios.get('<https://example.com/api/data>')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('There was an error!', error);
  });

Axios 인스턴스화

Axios 인스턴스(axiosManager 등)를 생성하면, 공통된 설정(기본 URL, 헤더 등)을 재사용할 수 있다. 이는 코드 중복을 줄이고 프로젝트의 구조를 더 깔끔하게 관리할 수 있게 해준다.
const apiClient = axios.create({
  baseURL: '<https://example.com/api>',
  headers: {
    'Content-Type': 'application/json'
  }
});

apiClient.get('/data')
  .then(response => console.log(response.data));