React에서 HTTP 인터셉터 사용하기

React 애플리케이션에서 외부 API와 데이터를 주고받을 때, HTTP 요청과 응답을 중간에서 가로채거나 처리하는 기능이 필요할 때가 있습니다. 이를 통해 인증 토큰을 자동으로 추가하거나, 요청을 로깅하고 오류를 일괄 처리하는 등 다양한 기능을 구현할 수 있습니다.

React 자체에는 HTTP 인터셉터 기능이 내장되어 있지 않지만, Axios와 같은 라이브러리를 활용하면 손쉽게 HTTP 인터셉터를 구현할 수 있습니다.

이번 글에서는 React 프로젝트에서 Axios를 사용해 HTTP 인터셉터를 설정하고 활용하는 방법에 대해 알아보겠습니다.

---

HTTP 인터셉터란?

HTTP 인터셉터는 HTTP 요청 또는 응답을 가로채 특정 로직을 실행하는 기능입니다. 이를 통해 다음과 같은 작업을 수행할 수 있습니다:

• 요청 헤더에 인증 토큰이나 공통 파라미터를 추가하기
• 요청 및 응답 로깅
• 오류 일괄 처리 및 메시지 변환
• 중복 요청 방지 또는 캐싱 구현

Axios는 이러한 HTTP 인터셉터를 설정하기 위해 axios.interceptors.request와 axios.interceptors.response 메서드를 제공합니다.

---

React 프로젝트에서 Axios 설정하기

Axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, React 애플리케이션에서 널리 사용됩니다. 먼저 프로젝트에 Axios를 설치해야 합니다.

1. Axios 설치

npm install axios

2. Axios 기본 인스턴스 설정

프로젝트에 Axios 인스턴스를 생성하고, 이 인스턴스를 사용해 인터셉터를 설정합니다.

axiosInstance.js 파일을 생성합니다.

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'https://api.example.com', // API의 기본 URL 설정
  timeout: 10000, // 요청 타임아웃 시간 설정
});

// 요청 인터셉터 설정
axiosInstance.interceptors.request.use(
  (config) => {
    // 요청 전에 실행될 로직
    console.log('요청 시작:', config);
    const token = localStorage.getItem('authToken');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    // 요청 오류 처리
    console.error('요청 오류:', error);
    return Promise.reject(error);
  }
);

// 응답 인터셉터 설정
axiosInstance.interceptors.response.use(
  (response) => {
    // 응답 데이터를 가공하거나 로깅
    console.log('응답 받음:', response);
    return response;
  },
  (error) => {
    // 오류 처리 로직
    console.error('응답 오류:', error);
    if (error.response && error.response.status === 401) {
      console.log('인증 오류 발생! 로그아웃 처리');
      // 로그아웃 처리 또는 리프레시 토큰 로직 구현
    }
    return Promise.reject(error);
  }
);

export default axiosInstance;

코드 설명

1. Axios 인스턴스 생성: axios.create()를 사용해 기본 설정이 적용된 Axios 인스턴스를 만듭니다.
2. 요청 인터셉터: 요청 전 Authorization 헤더에 토큰을 추가하거나 공통 설정을 적용합니다.
3. 응답 인터셉터: 응답 데이터를 로깅하거나, 오류를 처리합니다.

---

React 컴포넌트에서 Axios 사용하기

설정한 Axios 인스턴스를 React 컴포넌트에서 사용할 수 있습니다.

import React, { useEffect, useState } from 'react';
import axiosInstance from './axiosInstance';

const MyComponent = () => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axiosInstance.get('/data');
        setData(response.data);
      } catch (err) {
        setError(err);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>React에서 Axios 인터셉터 사용 예제</h1>
      {error ? (
        <p>오류 발생: {error.message}</p>
      ) : data ? (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      ) : (
        <p>로딩 중...</p>
      )}
    </div>
  );
};

export default MyComponent;

코드 설명

1. axiosInstance.get()를 호출해 서버로부터 데이터를 가져옵니다.
2. Axios 인터셉터에서 설정한 로직이 실행되며, 요청 헤더에 자동으로 토큰이 추가됩니다.
3. 오류가 발생하면 인터셉터를 통해 일괄적으로 처리하거나 컴포넌트에서 개별 처리할 수 있습니다.

---

공통 오류 처리 및 재시도 로직

응답 인터셉터를 활용하면 공통 오류 처리 및 요청 재시도 로직을 쉽게 구현할 수 있습니다.

1. 재시도 로직 구현

import axios from 'axios';

let retryCount = 0;

axios.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response && error.response.status === 500 && retryCount < 3) {
      retryCount += 1;
      console.log(`재시도: ${retryCount}`);
      return axios(error.config); // 요청 재시도
    }
    return Promise.reject(error);
  }
);

2. 오류 메시지 변환

axiosInstance.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response) {
      switch (error.response.status) {
        case 404:
          error.message = '요청한 리소스를 찾을 수 없습니다.';
          break;
        case 500:
          error.message = '서버 오류가 발생했습니다.';
          break;
        default:
          error.message = '알 수 없는 오류가 발생했습니다.';
      }
    }
    return Promise.reject(error);
  }
);

---

결론

React 애플리케이션에서 Axios 인터셉터를 사용하면 HTTP 요청과 응답을 효율적으로 관리할 수 있습니다. 요청 헤더에 토큰을 자동으로 추가하거나, 공통 오류 처리 및 재시도 로직을 구현하면 더욱 깔끔하고 유지 보수하기 쉬운 코드를 작성할 수 있습니다.

Axios 인터셉터를 적절히 활용해 React 애플리케이션의 네트워크 통신을 최적화해보세요! 😊