Axios!

김지유·2025년 9월 27일

목적

학교 취업 동아리에서 훅, 로컬스토리지를 활용해서 날씨 API를 가져와 날씨를 알려주는 웹을 만드는 과제를 받았습니다.
이 과제를 수행하면서 Axios에 대해 공부하게 되었습니다.
React에서 API를 연동하는 방법 중 제일 많이 사용되는 방법이 바로 Axios라고 합니다.

그래서 오늘은 Axios를 한 번 파해쳐 보겠습니다!

Axios란?

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다.

내부적으로 브라우저에서는 XMLHttpRequest 객체를 사용하고, Node.js에서는 http 모듈을 활용하여 요청을 처리합니다.

특히 Axios는 Promise API 기반으로 동작하기 때문에 비동기 코드 작성이 깔끔하고, async/await 구문과 자연스럽게 어울립니다.
단순히 요청을 보내는 기능뿐만 아니라, 응답 데이터 변환, 요청 취소, 인터셉터, XSRF 보호 같은 다양한 편의 기능을 제공한다는 점에서 fetch보다 더 생산적입니다.

Axios 기본 사용법

설치
npm install axios
Axios는 외부 라이브러리이므로 먼저 설치해야 합니다.
불러오기

import axios from 'axios';

GET method 방식

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);   // 서버가 보내준 데이터
    console.log(response.status); // HTTP 상태 코드
  })
  .catch(error => {
    console.error(error);         // 에러 처리
  });

GET 방식에서는 axios.get으로 요청할 URL을 작성하고, .then()에서 성공 시 데이터를 처리하고, .catch()에서 에러를 처리합니다.

POST method 방식

axios.post('https://api.example.com/data', {
  name: 'jiyu',
  age: 17
})
  .then(response => {
    console.log(response.data);   // 서버 응답
  })
  .catch(error => {
    console.error(error);         // 에러 처리
  });

POST 방식에서는 axios.post를 사용하고, URL과 함께 서버로 보낼 데이터를 작성합니다.
그리고 GET 방식과 마찬가지로 요청이 성공하면 .then()에서 응답 데이터를 처리하고,
요청이 실패하면 .catch()에서 에러를 처리합니다.

Axios 장점

1. 더 많은 기능 및 편의성

Axios는 다른 통신 방법들 보다 더 많은 기능을 제공하며, 요청과 응답을 보다 쉽게 다룰 수 있는 편의성을 제공합니다.
예를 들어, 요청과 응답을 가공하거나 인터셉터를 사용하여 요청이나 응답 전에 특정 작업을 수행할 수 있습니다.

2. 자동 JSON 변환

Axios는 자동으로 JSON 데이터를 파싱하거나 시리얼라이즈 해주는 특징을 가지고 있습니다.
반면, fetch는 이러한 기능을 기본적으로 제공하지 않아서 수동으로 처리해야 합니다.

3. 브라우저 호환성

Axios는 브라우저 호환성을 고려하여 개발되었기 때문에 일부 오래된 브라우저에서도 문제없이 동작합니다.
반면, fetch는 IE11과 같은 오래된 브라우저에서는 지원이 부족할 수 있습니다.

4. 에러 핸들링

Axios는 HTTP 에러 상태 코드를 자동을 확인하고 에러가 발생했을 때 더 자세한 정보를 제공하는 특징을 가지고 있습니다.

5. HTTP 요청 취소

Axios는 요청을 취소하는 기능이 내장되어 있습니다.
이는 특정 요청을 중단하고 싶을 때 유용합니다.

6. 요청/응답 인터셉트 기능

Axios의 가장 큰 장점 중 하나는 인터셉터 기능입니다.
요청이 서버로 전달되기 전에, 혹은 응답이 애플리케이션에 도착하기 전에 데이터를 가로채서 수정하거나 추가 로직을 실행할 수 있습니다.

7. XSRF(CSRF) 공격 방지 지원

웹 애플리케이션에서 자주 문제 되는 보안 위협 중 하나가 XSRF 공격입니다.
이는 사용자가 모르는 사이에 악성 사이트가 사용자의 인증 정보를 도용해 요청을 보내는 방식인데, Axios는 이를 막기 위한 클라이언트 사이드 기능을 제공합니다.
서버가 쿠키에 담아 전달한 토큰을 Axios가 자동으로 읽어서 요청 헤더에 함께 전송하도록 해주기 때문에, 서버 측 검증과 맞물려 안전한 통신을 구현할 수 있습니다.

Axios 단점

import, require로 모듈 설치가 필요
- Axios는 자바스크립트 기본 내장 기능이 아니라 외부 라이브러리입니다.
  따라서 프로젝트에 사용하려면 npm install axios와 같은 설치 과정이 필요하고, 코드 안에서도 axios from "axios"sk require("axios") 방식으로 불러와야 합니다.
  반면 fetch는 브라우저와 Node.js에서 기본적으로 제공되므로 별도의 설치 없이 바로 사용할 수 있습니다.
번들 크기가 상대적으로 큰 편
- Axios는 다양한 편의 기능(인터셉트, 요청 취소 등)을 제공하는 만큼 라이브러리 크기가 fetch보다 큽니다. 번들 크기가 커지면 초기 로딩 속도에 영향을 줄 수 있습니다.

내 코드

다음으로 Axios를 사용해서 제가 짠 코드를 통해 axios를 설명해 보겠습니다.

const fetchWeather = async (cityName) => {
    if (!cityName) return;

    try{
      const res = await axios.get(
        "https://api.openweathermap.org/data/2.5/weather",
        {
          params: {
            q: cityName,
            appid: API_KEY,
            units: "metric",
            lang: "kr",
          },
        }
      );

      if(res.status === 200){
        if(weather){
          setRecent([weather.name]);
          localStorage.setItem("weather", JSON.stringify([weather.name]));
        }
        setWeather(res.data);
      }
    } catch(err) {
      if(err.status && err.status === 404)
        alert("지역을 찾을 수 없습니다.");
    }
  };

이 코드는 파일에 Axios가 있는 일부 코드만 가져온 것 입니다.

이 코드는 api key와 온도 단위 mertic(섭씨), api 응답 언어를 한국어로 설정하게 하는 파라미터를 전달하며 날씨 api를 불러오고 있습니다.
여기서 params란 기능은 Axios에서 URL 쿼리 파라미터를 쉽게 붙여주는 옵션입니다.
https://api.openweathermap.org/data/2.5/weatherq=Seoul&appid=API_KEY&units=metric&lang=kr
fetch로 사용하게 되면 URL에 직접 이어 붙여야 하는 번거로움이 있습니다.
즉, params는 Axios 전용 편의 기능입니다.