[React] CustomAxios

안녕하세요 hp입니다 :)

최근에 진행한 프로젝트에서 axios를 모듈화해서 사용한 적이 있는데요 그때 모두가 통일화하지 않아서 마지막에 배포할 때 모든 요청주소를 바꿔줘야 하는 번거로움이 있었습니다.
그래서 오늘은 axios를 모듈화하는 방법을 알아보도록 하겠습니다. 만일 axios가 헷갈리신다면 지난 포스팅을 참고해주세요

📚 개념

일반적으로 axios를 사용할 때는 아래와 같이 사용합니다.
서버주소는 5000번이라고 가정하여 요청하도록 하겠습니다.

import axios from 'axios';

const fetchData = () => {
	const res = axios.get('http://localhost:5000/api-get',{
    	headers: {
        	Authorization: `Bearer ${localStorage.getItem('token')}`,
        }
    })
}

만일 위와 같이 구현하게 된다면 모든 요청에 header를 작성하고 요청 url을 작성해주고 만약 쿠키가 필요해 withCredentials: true 옵션까지 적으면 코드의 가독성이 떨어져 보이고 매우 번거로울 수 있습니다.

따라서 우리는 아래와 같이 axios를 custom하여 진행해야 합니다.

저 같은 경우에는 npm i dotenv로 모듈 설치후 .env 파일을 하나 생성해준 후에 아래와 같이 설정해줍니다.

REACT_APP_BASE_URL = http://localhost:5000

리액트 앱에서 dotenv를 사용하기 위해서는 앞에 REACT_APP을 꼭 붙여주셔야합니다.

import axios from 'axios';

const { REACT_APP_BASE_URL } = process.env;

const customAxios = axios.create({
  baseURL: REACT_APP_BASE_URL,
  headers: {
    Authorization: `Bearer ${localStorage.getItem('token')}`,
  },
  withCredentials: true,
});

export default customAxios;

위와 같이 axios 모듈화를 진행했다면 위에 예시 코드를 아래와 같이 바꿀 수 있습니다.

import axios from 'axios';
import customAxios from 'customAxios가 있는 폴더';

const fetchData = () => {
	const res = customAxios.get('/api-get');
}

❗️ 근데 위와 같이 custom 해서 사용하던 중에 토큰의 정보가 필요한 페이지에서 요청을 했을때 이전 토큰을 받아오는 에러가 발생했는데 오래 고민하고 찾아봤는데 아직 못 고치고 있습니다.. 혹시 아는 분이 있다면 댓글로 남겨주세요!

끝까지 읽어주셔서 감사합니다. 😃

📌 참고

Axios 공식문서
Axios 깃허브 저장소