React axios instance 사용법 (API 모듈화)

 

1. Axios Instance 생성법

api/axios.js

import axios from "axios";

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

export default instance;

 

이제까지 해왔던 프로젝트 중 가장 스케일이 커서 이번엔 baseURL을 사용해보려고 axios instance를 생성해봤다.

 

base url 뿐만 아니라 타임아웃 설정, 요청 인터셉터 추가, 응답 인터셉터 추가 등의 역할을 수행한다. 그래서 한마디로 api를 모듈화한다고 생각하면 된다. 인증이 필요한 요청이면 요청 인터셉터에서 헤더에 token을 추가하는 등의 과정을 효율적으로 수행하며 코드 재사용에 용이하다.

 

특히 공통적으로 사용되는 헤더나 타임아웃 등을 설정할 수 있다.

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  headers: { 'X-Custom-Header': 'foobar' },
  timeout: 1000,
});

 

axios 모듈화 이후에는 api폴더에 용도에 맞게 파일을 각각 분리시킨다. 

 

이번 프로젝트에서는 소셜로그인만 구현해서 헤더에 토큰을 추가하지는 않았지만, 다음에 프로젝트에서도 api 를 모듈화해서 사용하게 될텐데 그때는 두개의 모듈을 만들어서 용도에 맞게 사용하면 된다.

 

 

예를 들면

 

const axiosApi = (url, options) => {
  const instance = axios.create({baseURL :  url, ...options})
  return instance;
}

const axiosAuthApi = (url, options) => {
  const token = localStorage.getItem("token");
  const instance = axios.create({
    baseURL: url,
    headers: { Authorization: `Bearer ${token}` },
    ...options
  })
  return instance;
}

export const defaultInstance = axiosApi;
export const authInstance = axiosAuthApi;

 

이렇게 인증을 필요로하는 api instance와 그렇지 않은 instance를 구분해서 export 하면 된다.

 

api가 많아지다보니 관리하기가 어려웠는데 이렇게하면 코드의 양을 엄청나게 줄일 수 있을 것 같다.

 

 

 

https://axios-http.com/docs/instance

https://ghost4551.tistory.com/163