[ Fetch와 Axios 기초 강좌 ④] Axios 실전 활용: axiosInstance로 공통 설정 관리하기

왜 axiosInstance가 필요할까?

실무에서는 API 요청이 한두 번으로 끝나지 않습니다.
회원가입, 로그인, 데이터 조회, 수정 등 다양한 요청이 반복되며,
baseURL, headers, 인증토큰 설정을 매번 입력하는 것은 비효율적입니다.

이 문제를 해결하는 방식이 바로 axiosInstance입니다.
Axios 인스턴스를 생성해 공통 설정을 모듈화하면 코드 재사용성과 유지보수가 높아집니다.

핵심 개념

• axios.create()를 사용하면 새로운 인스턴스를 만들 수 있음
• 공통된 baseURL, headers, withCredentials 등을 지정해 매번 반복하지 않고 사용
• 하나의 파일에 인스턴스를 설정하고, 필요한 컴포넌트에서 import하여 사용
  
  

실전 예시: axiosInstance 구성

1. 인스턴스 구성

// src/services/axiosInstance.js
import axios from "axios";

const axiosInstance = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com", // 기본 도메인 설정
  headers: {
    "Content-Type": "application/json" // 모든 요청에 적용될 헤더
  },
  withCredentials: true // 쿠키 포함 여부 (필요한 경우)
});

export default axiosInstance;

2. 실제 사용 코드

// src/pages/PostListPage.js
import axiosInstance from "../services/axiosInstance";

axiosInstance.get("/posts")
  .then(res => {
    console.log("데이터:", res.data);
  })
  .catch(err => {
    console.error("에러 발생:", err);
  });

응용: 인증 토큰 자동 포함하기

사용자가 로그인한 후 토큰이 있다면 모든 요청에 자동 포함되게 할 수 있습니다.

// src/services/axiosInstance.js
import axios from "axios";

const token = localStorage.getItem("accessToken");

const axiosInstance = axios.create({
  baseURL: "https://api.example.com",
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${token}` // 토큰 자동 포함
  }
});

export default axiosInstance;

로그인 후 토큰을 갱신해야 하는 경우엔 인터셉터로 처리합니다. 이는 고급 주제로 별도 다룹니다.

폴더 구조 예시

src/
  services/
    axiosInstance.js
  pages/
    PostListPage.js
    RegisterPage.js

단계 요약

• axios.create()로 인스턴스를 만들어 공통 설정을 적용
• baseURL, headers, 인증 토큰 등은 인스턴스에 한 번만 설정
• 모든 API 요청은 axiosInstance.get(), axiosInstance.post() 형태로 통일
• 유지보수와 협업에 매우 효율적인 패턴

 

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.