[React]효율적인 axios 사용을 위한 customAxios

필요한 api를 요구정리서에 담아 백엔드에 요청하는 과정에서 api가 꽤 다양하고 많아졌구나 생각이 들었습니다. 같은 역할을 하는 api가 다른 컴포넌트에 존재할 때가 있겠다 싶었습니다. axios를 모듈화해서 사용되는 api에 대해 한눈에 보고 재사용하고자 합니다.

기존의 axios

아래 코드는 현재 저희 프로젝트 내 회원탈퇴함수 입니다.

const BACKEND_URL =
    process.env.NODE_ENV === 'development'
      ? `${process.env.NEXT_PUBLIC_DEVELOP_URL}/members/`
      : `${process.env.NEXT_PUBLIC_PRODUCT_URL}/members/`;

  const deleteMember = async () => {
    let isDelete = confirm('정말로 탈퇴하시겠습니까?');
    if (isDelete) {
      try {
        const delete_res = await axios.delete(BACKEND_URL, {
          headers: { Authorization: getCookie('token') },
        });
        Router.push({
          pathname: '/',
        });
      } catch (res) {
        console.log(res);
      }
    }
  };

서비스 내 대부분의 api 는 헤더에 토큰을 넣어 요청해야하는 데 매번 토큰을 넣어주어야합니다. 이를 개선해보고자 합니다.

2. customAxios 파일 생성

pages/api 폴더에 customAxios.ts 파일을 생성했습니다.

const BACKEND_URL =
  process.env.NODE_ENV === 'development'
    ? `${process.env.NEXT_PUBLIC_DEVELOP_URL}`
    : `${process.env.NEXT_PUBLIC_PRODUCT_URL}`; // 기본 서버 주소 입력
// 서비스 인증토큰이 필요한 api
export const authAxios: AxiosInstance = axios.create({
  baseURL: `${BACKEND_URL}`,
  headers: {
    Authorization: !!getCookie('token') ? `${getCookie('token')}` : '',
  },
});

// 서비스 인증토큰이 필요하지 않은 api
export const notAuthAxios: AxiosInstance = axios.create({
  baseURL: `${BACKEND_URL}`,
});

보편적으로 서비스 인증이 필요한 통신이 많기 때문에 헤더에 서비스토큰을 넣어 보내는 authAxios 와 notAuthAxios 두가지 인스턴스를 생성했습니다.

3. customAxios 응용

export const DeleteMemberApi = () => {
  return authAxios.delete('/members');
};

회원탈퇴 api 를 통신하기 위해서는 서비스토큰을 요구하기 때문에 authAxios를 이용하여 새로운 API함수를 생성했습니다.

// 회원탈퇴 api 사용하는 사례
  const deleteMember = async () => {
    let isDelete = confirm('정말로 탈퇴하시겠습니까?');
    if (isDelete) {
      try {
        const res = await DeleteMemberApi();
        removeCookies('token');
        Router.push({
          pathname: '/',
        });
      } catch (res) {
        console.log(res);
      }
    }
  };

이전과 비교했을 때 새로운 header 와 baseurl 을 생략할 수 있게 되었습니다. 또한 다른 많은 api들도 이러한 형태로 사용이 가능해졌습니다.

결론

api가 호출되는 함수 내부의 가독성이 좋아졌습니다. 뿐만 아니라 api를 arrow function 으로 선언하여 반환하는 형태로 사용하여 직관성도 좋아졌죠. 그리고 같은 역할의 api 통신에 대한 재사용성을 높히고 폴더로 나누어 관리하여 유지보수에 유리해졌습니다.

참고자료