axios란

최종욱·2025년 2월 19일

React

react

목록 보기

5/7

1. Axios 기본 사용법

Axios란?

정의: Axios는 GET, POST, DELETE, PATCH 등 HTTP 요청을 간편하게 보낼 수 있는 라이브러리
설치 및 설정: 프로젝트에 Axios를 설치(yarn add axios)한 후, 민감한 정보(API URL, API Key)는 .env 파일로 관리하는 게 좋음

주요 HTTP 요청

GET 요청

사용법: axios.get(url, config)
React의 useEffect와 useState를 이용해 데이터를 fetch하고 상태를 관리

POST 요청

사용법: axios.post(url, data, config)
입력 폼에서 받은 데이터를 서버에 추가할 때 사용
POST 후 브라우저 새로고침 시 추가된 데이터가 반영

DELETE 요청

사용법: axios.delete(url, config)
특정 데이터를 삭제할 때, 각 항목에 삭제 버튼을 배치해 ID 기반으로 요청을 보냄

PATCH 요청

사용법: axios.patch(url, data, config)
기존 데이터를 일부 수정할 때 사용
수정할 Todo의 ID와 새로운 값을 입력받아 PATCH 요청을 보냄

axios vs fetch

Axios가 fetch보다 선호되는 이유

공통 설정 및 인터셉터 지원 : 기본 설정을 한 곳에서 관리하고, 요청/응답 전/후 처리 가능
일관된 오류 처리 : HTTP 상태 코드 기반 에러 처리가 간단함
구형 브라우저 호환성 : 폴리필 없이 안정적으로 사용 가능
간결한 문법 : 코드가 직관적이며 유지보수가 용이
자동 데이터 변환 : Axios가 자동으로 JSON 데이터를 변환

2. Axios Custom Instance

Custom Instance의 필요성

모든 API 요청이 한 곳에서 재사용되므로 코드 중복을 최소화
예를 들어, baseURL, 타임아웃, 공통 헤더 등을 한 곳에 정의하면 서버 주소가 변경되더라도 단 한 번만 수정하면 됨
공통 에러 핸들링 로직을 추가하여 모든 요청에서 일관된 오류 처리를 적용가능
Custom Instance 만들기

//ex) src/axios/api.js

import axios from "axios";

const api = axios.create({
  baseURL: "http://localhost:4000",
});

// 요청 인터셉터: 요청 전 토큰을 헤더에 추가
api.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("token");
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 응답 인터셉터: 응답 에러를 일괄 처리
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response && error.response.status === 401) {
      console.error("인증 실패: 토큰이 만료되었거나 잘못되었습니다.");
      // 추가적인 에러 처리 로직(예: 로그인 페이지로 리다이렉트)을 작성 가능
    }
    return Promise.reject(error);
  }
);

export default api;