[React] Axios instance 와 interceptors 로 Axios 효율성 높이기

[React] Axios instance 와 interceptors 로 Axios 효율성 높이기

전역 Axios 기본값 설정하기

axios.defaults 속성을 사용하여 전역 Axios 기본값을 설정할 수 있다. 이를 통해 Axios 요청에 적용되는 기본값을 지정할 수 있다.

전역 Axios 기본값을 설정하면 코드를 간결하게 유지할 수 있고, 일관된 설정을 적용해 코드의 가독성과 유지보수성을 향상시킬 수 있다.

axios.defaults.baseURL = 'https://devDiary.com/';
axios.defaults.timeout = 5000;
axios.defaults.headers.common['Authorization'] = 'Bearer AccessToken';
axios.defaults.headers.post['Content-Type'] = 'application/json';

― .baseURL : 모든 요청의 기본 URL. 이를 통해 각 요청에서 절대 URL 이 아닌 상대 URL 을 사용할 수 있음

― .common : Axios 모든 요청에 공통적으로 적용되는 헤더 설정. 주로 모든 요청에 필요한 인증 토큰이나 기본적으로 필요한 헤더를 설정할 때 사용됨

― .post : POST 요청에만 적용되는 헤더 설정

 

전역 설정이 코드의 유연성을 해칠 수도 있다.

Axios를 사용할 때는 기본적으로 전역 설정이 적용되어 모든 요청에 동일한 설정이 적용된다.

하지만 이는 유연성이 떨어지고, 코드의 가독성과 유지보수성을 해치는 요인이 될 수 있다.

 

따라서 필요한 설정만 정의하여 각 요청에 맞게 세밀하게 조정할 필요가 있다. 이를 위해서 Axios instance 를 사용한다.

 

Axios instance 란?

Axios instance는 axios를 `인스턴스화`하여 생성한 `객체`를 말한다. 이 객체는 HTTP 요청을 보내고 응답받는 데 사용된다. instance 로 기본 설정을 하고 별도의 instance 를 생성해 각각 독립적인 설정을 적용할 수도 있다.

즉, Axios instance 를 사용하면 여러 개의 서로 다른 설정을 가진 인스턴스를 만들어 `재사용`할 수 있는 것이다.

문법

axios.create([config])

 

사용 예시

import axios from 'axios'

const baseURL = 'https://example.com'
const token = 'your_token'

// 인스턴스 생성
const instance = axios.create({
  baseURL: baseURL,
  timeout: 10000
  headers: {
    'Authorization': `Bearer ${token}`
  }
})

// 요청 보내기
instance.get('/endpoint')
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.error(err);
  });

 

instance 를 사용하면 다음과 같은 이점이 있다.

• 여러 API 엔드 포인트를 사용하는 경우 각각에 대한 baseURL 설정
• interceptor, header 등 인스턴스에 한번만 정의하여 중복 피하기
• 코드의 모듈성과 재사용성 높이기

물론 instance 를 사용하지 않더라도 baseURL, 토큰, 헤더를 한번만 설정해서 재사용할 수 있지만, 이러한 방법은 전역적인 설정을 강제하게 되어 모듈성을 약하게 만들 수 있다.

모듈성
쉽게 말하면 작은 부분들이 독립적으로 작동하고 조합될 수 있는 정도를 말한다.
모듈성이 높은 코드는 각각의 모듈이 독립적으로 작동하면서 서로 의존성이 낮아 유지보수가 용이하고 확장성이 좋다. 이는 소프트웨어의 품질과도 직결되기 때문에 모듈성을 높이는 것이 중요하다고 할 수 있다.

 

---

 

instance 기능 확장

Axios instance 를 확장하여 사용하는 방법은 인터셉터(interceptors)를 이용하는 것이다.  interceptors 를 이용하면 Axios 요청 혹은 응답을 가로채 수정할 수 있다.

instance 를 사용하여 기본 설정을 정의하고, interceptors 를 사용하여 특정 요청에 대한 인증, 로깅 등의 추가적인 처리를 구현할 수 있다. 이렇게 instance 와 interceptors 를 함께 사용하면 Axios 를 더 효율적으로 사용할 수 있게 된다.

 

Axios interceptors 란?

interceptors는 Axios 라이브러리에서 제공하는 기능으로, HTTP 요청 혹은 응답을 가로채고 수정할 수 있도록 해준다.

이를 통해 요청과 응답 사이에 인터셉터를 설정할 수 있으며, 요청을 보내기 전이나 응답이 반환되기 전 특정 작업을 수행할 수 있다.

문법

interceptors 는 `axios.interceptors.request.use` 및 `axios.interceptors.response.use`를 통해 설정할 수 있다.

각 메서드는 두 개의 콜백 함수를 인수로 받는다. 첫 번째 콜백은 요청이나 응답이 성공할 경우 호출되고 두 번째 콜백은 요청이나 응답이 실패할 경우 호출된다.

요청 인터셉터 추가하기

axios.interceptors.request.use(config => {
  // 요청 전에 수행할 작업
  return config;
}, error => {
  // 요청 오류 처리
  return Promise.reject(error);
});

 

응답 인터셉터 추가하기

axios.interceptors.response.use(response => {
  // 응답 데이터 가공
  return response;
}, error => {
  // 응답 오류 처리
  return Promise.reject(error);
});

 

인터셉터 제거하기

특정 요청에 대해 더 이상 interceptors 를 적용하지 않아야할 경우 즉, 해당 요청에 대한 추가적인 처리가 필요하지 않을 경우 interceptors 를 제거할 수 있다.

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

 

커스텀 인스턴스에서 인터셉터 추가하기

특정 요청에 대해 기본 설정과 다른 interceptors 를 적용해야할 경우, 해당 요청에 대한 커스텀 인스턴스를 생성하고 interceptors 를 추가할 수 있다.

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

 

interceptors 를 사용하면 다음과 같은 이점이 있다.

• 요청과 응답을 가로채 요청이 보내지기 전, 응답이 반환되기 전 특정 작업을 수행
• 여러 요청에 대해 공통된 작업을 수행해 중복 코드 제거
• 요청과 응답에 대한 처리를 자유롭게 확장 가능

interceptors 에 예외 처리하고 처리된 결과를 반환하는 것이 중요하다. interceptors 에서 예외가 발생하면 해당 요청 또는 응답이 실패된다.

또한 interceptors 설정시 순서에 따라서 요청과 응답 처리 순서가 달라질 수 있기 때문에 조심해야한다.

 

---

 

마치며

이 글을 통해 Axios instance 와 interceptors 를 사용하여 axios 의 효율성을 높일 수 있는 방법을 알게 되었다.

프로젝트에서 별도의 instance 를 생성하여 서로 다른 설정을 적용하였다. 기본 instance 는 interceptors 를 통해 refreshToken 이나 accessToken 관련 인증 관련 로직을 추가하였고, 그에 관련한 에러 핸들링을 추가하였다. 별도의 instance 에는 인증 관련 처리를 하지 않고 단순 서버로부터 받은 응답 데이터만 처리하는 로직을 추가하여 사용하였다.

결과적으로 instance, interceptors 를 상황에 맞게 사용하여 코드의 가독성이 향상되었고, 재사용성 및 유지보수성을 향상시킬 수 있었다.

 

< 이전글

[React] React 에서 Axios 사용하기

 

reference

---

• Axios instance
• Axios interceptors