Axios 기본 개념 정리

Axios란?

자바스크립트(JS)에서 HTTP 요청을 보내고 데이터를 받아오기 위한 Promise 기반 HTTP 클라이언트 라이브러리.

브라우저와 Node.js 환경에서 모두 사용할 수 있어서 React, Vue와 같은 프레임워크에서 주로 사용된다.

서버와 통신할 때 GET, POST, PUT, DELETE 같은 CRUD 요청을 보내고 데이터를 가져오는 일을 간편하게 처리해준다.

Axios 특징

• Promise 기반: Axios는 비동기적으로 작동하며, Promise를 사용해 HTTP 요청이 완료될 때 결과를 처리할 수 있다.
• CRUD 메서드 사용: 서버와의 통신을 위해 HTTP의 CRUD 메서드를 명시적으로 사용한다.
• 자동 JSON 변환: 요청을 통해 서버로부터 받은 데이터는 자동으로 JSON으로 변환되어 사용이 쉽다.
• 요청 취소: 요청을 보내는 중에 취소가 가능하다.
• 인터셉터 기능: 요청 또는 응답을 가로채고 그 값을 변경할 수 있다.
• 보편적인 브라우저 호환성: 운영 환경에 따라 브라우저에서는 XMLHttpRequest 객체, Node.js 환경에서는 HTTP API를 사용한다.
• 타임아웃 설정: 요청 시간이 너무 오래 걸리면 타임아웃을 설정할 수 있다.

💡 XMLHttpRequest 란?
웹 브라우저에서 서버와 비동기적으로 데이터를 주고받을 수 있도록 해주는 JavaScript 객체이다.
주로 AJAX(Asynchronous JavaScript and XML) 기술의 핵심으로 사용되어, 웹페이지를 다시 로드하지 않고도 서버와 데이터를 주고받을 수 있게 한다. 자세한 설명은 아래의 AJAX 개념 정리글 참고!
https://hjinn0813.tistory.com/130

AJAX, XMLHttpRequest 개념 정리

Axios 장단점

장점	- 사용하기 쉬움: 문법이 직관적이고 간결하여 쉽게 사용할 수 있다. - Promise와 Async/Await 사용: Promise와 함께 작동하므로, 비동기 코드를 더욱 간결하게 작성할 수 있다. - 인터셉터 제공: 요청 및 응답 전에 추가 로직을 넣을 수 있어 유연하다. - 자동으로 JSON 처리: 별도의 설정 없이 JSON 데이터를 쉽게 처리할 수 있다. - 취소 기능: 아직 완료되지 않은 요청을 취소할 수 있다.
단점	- 용량: Axios는 Fetch API에 비해 상대적으로 더 큰 용량을 차지하여, 작은 프로젝트에서는 Fetch API가 더 가벼울 수 있다. - 지원 종료된 브라우저: 아주 오래된 브라우저에서는 일부 기능이 지원되지 않을 수 있지만, 대부분의 경우 큰 문제가 되지 않는다. - 추가 설정이 복잡함: 복잡한 API 통신을 할 때는 추가 설정이 필요하여 코드가 복잡해질 수 있다.

Axios 사용 예시 코드 (React)

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

export default function App() {
  const [data, setData] = useState(null);  // 데이터를 저장할 상태
  const [loading, setLoading] = useState(true);  // 로딩 상태
  const [error, setError] = useState(null);  // 에러 상태

  // 컴포넌트가 마운트되었을 때 API 요청
  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts/1')
      .then(response => {
        setData(response.data);  // 성공 시 데이터 저장
        setLoading(false);  // 로딩 완료
      })
      .catch(err => {
        setError(err);  // 실패 시 에러 저장
        setLoading(false);  // 로딩 완료
      });
  }, []);

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

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
};

예시 코드를 살펴보니 기본적인 사용 방법은 fetch()와 같았다.
👉 useState로 데이터 저장/로딩/에러 시의 상태를 관리하고, useEffect를 통해 데이터를 불러온다. 그리고 then()에는 데이터 불러오기에 성공했을 경우, catch()에는 데이터 가져오기에 실패했을 경우에 각각 어떻게 할지를 설정했다. 그리고 useEffect 바깥에 프론트엔드 측에서의 로딩/에러 처리를 if문으로 작성했다.
💡 fetch() 사용법과 다른 점이 있다면, fetch()는 기본적으로 GET 요청을 사용하므로 API 주소만 넣어도 데이터 불러오기가 가능하지만, Axios는 뒤에 CRUD 방식의 메서드를 붙여서 어떤 요청을 보낼지 명확하게 지정해야 한다.

Axios가 fetch()랑 사용법이 같고 CRUD 메서드 붙여주는 부분만 다르다면 그렇게 어렵지는 않을 것 같다고 생각했는데.. 앞서 개념을 정리했던 React Query랑 비교하다보니, Axios에만 있는 응답/요청 인터셉터나 그 외에 추가적으로 설정할 수 있는 것들이 많아서 깊게 들어가면 만만하지 않겠다는 느낌이 든다.😂

https://hjinn0813.tistory.com/126

React Query 기본 개념 정리

---

Axios, Fetch, React Query 비교

/	Axios	fetch()	React Query
데이터 패칭	axios.get()등 방식으로 호출	fetch() 함수로 직접 요청	useQuery() 훅으로 비동기 데이터 요청
로딩/에러 처리	then/catch 또는 async/await로 직접 처리	then/catch 또는 async/await로 직접 처리	isLoading, error 상태 자동 관리
캐싱 기능	없음	없음	내장 캐싱 기능 (자동 캐싱, 스토리지 옵션)
데이터 자동 갱신	없음	없음	자동 갱신 (수동 갱신 설정 가능)
에러 처리(FE)	자동으로 에러 핸들링 (응답 오류 catch)	응답 오류를 수동으로 처리해야 함	자동 에러 상태 관리 (error.message)
유연성	매우 유연 (헤더, 인증, 타임아웃 등 설정)	비교적 간단, 추가 설정 제한적	다양한 옵션 제공 (쿼리 무효화, 재시도 등)
학습 난이도	중간 (라이브러리 설치 및 설정 필요)	쉬움 (네이티브 API로 바로 사용 가능)	중간 (리액트 훅 및 상태 관리 필요)
사용 용이성	직관적이며 간단한 코드	네이티브 함수로 직접 사용 가능	상태 및 캐시 관리를 자동으로 처리
장점	유연한 설정, 간결한 코드, 요청/응답 인터셉터	브라우저 내장 함수로 추가 설치 필요 없음	로딩, 캐싱, 갱신 등 자동화된 관리 제공
단점	별도의 설치가 필요하여 의존성이 추가된다	추가 기능이 부족하여 수작업이 많이 필요	설치 필요, 복잡한 설정 시 학습 필요

이 비교 그래프를 살펴보면서 어려웠던 내용을 추가적으로 학습했다.

• Axios와 달리 fetch에서 에러 처리를 수동으로 해야하는 이유:
  Axios는 "페이지 열어줘"라는 요청이 들어오면 응답을 통해 상태 코드를 확인하고, 에러 코드가 있으면 자동으로 catch 블록으로 넘겨진다. 하지만 Fetch는 같은 요청이 들어왔을 때 상태 코드를 확인하지 않고 응답하기 때문에, 에러가 발생해도 catch로 넘어가지 않고 빈 페이지를 열 수 있다. 따라서 Fetch에서는 response.ok를 통해 상태 코드를 수동으로 확인하고 처리해야 한다.

/* Axios의 에러 처리 */

axios.get('/some-endpoint')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log('Error:', error.response.status); 
    // 404 자동 처리
  });

// ==================================================================
/* fetch의 에러 처리 */

fetch('/some-endpoint')
  .then(response => {
    if (!response.ok) {
      throw new Error('HTTP error! status: ' + response.status); 
      // 수동 에러 처리 필요
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.log('Error:', error.message)); 
  // 404 에러 발생 시 처리

• Axios 헤더 설정: fetch에서 Headers:{}로 설정하는 것과 같다. 예를 들어, 인증 토큰을 요청 헤더에 넣는 경우 등.

/* axios 헤더 처리 예시 */

const token = 'your-authentication-token';

axios.get('/api/endpoint', {
  headers: { Authorization: `Bearer ${token}` }
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

/* fetch 헤더 처리 예시 */
const token = 'your-authentication-token';

fetch('/api/endpoint', {
  method: 'GET',
  headers: { Authorization: `Bearer ${token}` }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

• Axios 타임아웃 설정: 네트워크 요청이 일정 시간 내에 완료되지 않으면 에러를 발생시키는 기능.
  예를 들어, 서버가 5초 안에 응답하지 않으면 요청을 실패로 간주하는 설정을 할 수 있다.

// Axios 타임아웃 예시 코드

axios.get('/some-endpoint', { timeout: 3000 }) // 3초 타임아웃 설정
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.code === 'ECONNABORTED') {
      console.log('Request timed out');
    } else {
      console.log('Error:', error.message);
    }
  });

• Axios 인터셉터: 비동기적 작업이 처리되기 전에 코드를 실행할 수 있는 기능.
  예를 들어, 요청이 서버로 보내지기 전에 토큰을 헤더에 추가하거나, 응답이 오기 전에 특정 검사를 실행할 수 있다.

// Axios 인터셉터 예시 코드

// 요청 인터셉터
axios.interceptors.request.use(config => {
  config.headers['Authorization'] = 'Bearer your_token'; // 토큰 추가
  return config;
}, error => {
  return Promise.reject(error);
});

// 응답 인터셉터
axios.interceptors.response.use(response => {
  return response;
}, error => {
  console.log('Error response:', error.response);
  return Promise.reject(error);
});