React Axios Instance

1. Axios Instance

Axios Instance는 Axios를 설정하고, 재사용 가능한 설정을 가진 HTTP 클라이언트를 만드는 방식이다. 일반적으로 API 요청을 보낼 때 공통으로 필요한 설정(예: 기본 URL, 헤더, 인증 정보)을 매번 지정하지 않고 인스턴스에서 설정해두고 사용할 수 있다.

 

2. Axios instance 생성 방법

import axios from 'axios';

// Axios instance 생성
const apiClient = axios.create({
  baseURL: 'https://api.example.com', // 기본 URL 설정
  timeout: 5000, // 요청 제한 시간 (ms)
  headers: {
    'Content-Type': 'application/json', // request의 데이터 타입
    accept: 'application/json', // response의 데이터 타입
     'client-id': 'YOUR_CLIENT_ID',
    Authorization: 'Bearer YOUR_ACCESS_TOKEN',
  },
});

 

3. Axios instance 장점

3-1. 반복되는 설정 제거

API 요청마다 동일한 설정(예: baseURL, 헤더 등)을 작성할 필요가 없어서 생산성이 증가하고 코드가 간결해진다.

 

3-2. 요청/응답 인터셉터 적용 가능

각 인스턴스별로 요청이나 응답에 대한 인터셉터를 추가할 수 있다. 이를 통해 요청 전 데이터를 가공하거나, 응답 데이터를 변환하는 작업을 쉽게 처리할 수 있다.

apiClient.interceptors.request.use(
  (config) => {
    console.log('Request sent:', config);
    return config; // 요청 전 로직 추가
  },
  (error) => {
    return Promise.reject(error);
  }
);

apiClient.interceptors.response.use(
  (response) => {
    console.log('Response received:', response);
    return response; // 응답 후 로직 추가
  },
  (error) => {
    return Promise.reject(error);
  }
);

 

3-3. 확장성과 유지보수성

큰 프로젝트에서는 여러 API를 호출할 일이 많다. 각각의 API에 대해 별도의 Axios instance를 만들어 사용할 수 있어서 유지보수성이 높아진다.

 

 

4. 사용 예시

// GET 요청 예시
apiClient.get('/users')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

// POST 요청 예시
apiClient.post('/login', {
  username: 'example',
  password: '12345',
})
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

 

5. Axios instance를 사용해야 하는 이유

• 코드 중복 제거: baseURL이나 헤더 설정 등 반복적인 작업을 줄일 수 있다.
• 관리 용이: 요청 / 응답 로직을 한 곳에 정의하고 보수할 수 있다.
• 여러 API 지원: API 마다 다른 설정이 필요한 경우 각각의 인스턴스를 생성하여 관리가 가능하다.

 

6. 확장 예시: 여러 인스턴스 생성

만약 하나의 프로젝트에서 두 개의 API를 호출해야 한다면, 아래와 같이 각각의 인스턴스를 생성해서 관리할 수 있다.

const publicApi = axios.create({
  baseURL: 'https://public-api.example.com',
});

const privateApi = axios.create({
  baseURL: 'https://private-api.example.com',
  headers: {
    Authorization: 'Bearer YOUR_PRIVATE_TOKEN',
  },
});

 

이런식으로 구성하여 API의 특성에 맞게 요청을 관리 할 수 있다.

 

7. Axios instance와 글로벌 Axios 비교

• 글로벌 Axios(axios.default): 모든 요청에 공통 설정을 적용하지만, 프로젝트 규모가 커질수록 관리가 어렵다.
• Axios instance: 설정을 구분하여 특정 API에 적합한 설정을 할 수 있음