API 모듈화 - axios Instance 활용하기

안녕하세요 YB 박소이입니다.

세미나 때 API 요청을 다뤘는데, axios 인스턴스를 활용해 API를 모듈화할 수 있는 방법이 있다고 해서 알아 보았습니다!

---

보통은??

useEffect(() => {
  const fetchUsers = async () => {
    try {
      const res = await axios.get('<https://example.com/api/users>');
      setUsers(res.data);
    } catch (err) {
      console.error(err);
    }
  };

  fetchUsers();
}, []);

 

API 요청 다들 어떻게 하고 계신가요..??

저는 보통 이런 식으로 컴포넌트 안에서 직접 요청하는 방법을 사용했습니다. 하지만 이렇게 하다 보니 컴포넌트마다 axios를 반복적으로 작성해야 하고, 공통 headers나 특히 토큰을 매번 써줘야 한다는 점이 번거롭다고 느꼈습니다.

 

API 모듈화는 이런 불편함을 해결할 수 있는 방법이라고 하는데요!

 

API 모듈화

API를 모듈화하는 간단한 방법은 axios를 공통 설정으로 한 번만 만들고, API 요청은 별도의 파일로 분리해서 관리하면 컴포넌트에서 단순히 함수만 호출하는 것입니다.

 

📌 Axios Instance

1. 인스턴스 생성; 모듈화 하기

.create(config)메서드를 이용해서 사용자 정의 구성을 사용하는 axios 인스턴스를 생성할 수 있습니다.

const BASE_URL = "<https://sweeb.tistory.com>";
const token = localStorage.getItem("token");

const axiosInstance = (url) => {
  const instance = axios.create({
    baseURL: url,
    headers: { Authorization : `Bearer ${token}` }
  });
  return instance;
};

export const swebApi = axiosInstance(BASE_URL);

 

위와 같이 로컬 스토리지에 담긴 토큰을 불러와 header에 넣어주었고, API를 호출할 base url도 설정할 수 있습니다.

이외에도 타임아웃 설정, 요청 인터셉터 추가, 응답 인터셉터 추가 등의 역할을 수행합니다.

 

2. 인스턴스 활용

위에서 axios 모듈화를 시킨 이후, api 폴더에 용도에 맞게 파일을 분리시킵니다.

그리고 다음과 같이 API 요청 함수를 만들어 활용할 수 있습니다.

// api/user.js
import { swebApi } from '../api/axios'; 

export function getUser() {
  return swebApi.get('/users/me');
}

 

3. 컴포넌트에서 사용하기

마지막으로 컴포넌트에서는 API 호출 함수인 getUser()만 호출하면 됩니다.

// components/MyPage.js
import { getUser } from '../api/user';

function MyPage() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        const res = await getUser();
        setUser(res.data);
      } catch (err) {
        console.error(err);
      }
    };

    fetchUser();
  }, []);

  return <h1>{user.name}</h1>;
}

export default MyPage;

 

 

📌 Axios Interceptor

 

위에서 인터셉터에 대해 살짝 언급했는데, 간단히 알아 보고 가겠습니다.

인터셉터는 axios가 요청이나 응답을 보내기 전/받은 후에 가로채서 처리할 수 있는 기능입니다.

 

🔄 요청 인터셉터

요청을 보내기 직전에 실행되며

주로 공통 헤더 추가, 인증 토큰 삽입, 요청 로그 출력 등에 사용할 수 있습니다.

axios.interceptors.request.use(function (config) {
    // request가 서버에 보내지기 전에 실행 
    return config;
  }, function (error) {
    // 요청 오류 처리
    return Promise.reject(error);
  });

 

🔄 응답 인터셉터

 

서버로부터 응답을 받은 후 실행되며

주로 에러 처리, 응답 데이터 반환, 자동 로그아웃 처리 등에 사용됩니다.

axios.interceptors.response.use(function (response) {
    // 응답 데이터를 가공하거나 처리 
    return response;
  }, function (error) {
    // 응답 오류 처리 
    return Promise.reject(error);
  });

 

✅ 정리하자면

axios 인스턴스	공통 설정(baseURL, 토큰, 헤더 등)을 미리 지정한 axios 객체
요청 함수 모듈화	기능별로 API 요청 함수 파일을 분리
인터셉터	axios가 요청이나 응답을 보내기 전/받은 후에 가로채서 처리하는 기능

 

그래서 instance를 이용해 모듈화한다면 코드 재사용성이 증가하고 유지보수에 유리해진다는 장점이 있습니다. 또한, 다양한 옵션을 제공하고 있기 때문에 필요에 따라 추가해주면 활용도가 높을 것 같습니다.

 

API 연동이 복잡했다면, axios는 한 번만 설정하고 요청은 모듈로 분리해서 관리해보면 어떨까요?

읽어주셔서 감사합니다! 🙌☺️

 

 

 

---

출처

 

https://axios-http.com/docs/interceptors

https://nayoungkim00.tistory.com/109

https://velog.io/@jgy4419/Axios-%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-%EC%9D%B8%ED%84%B0%EC%85%89%ED%84%B0-Feat.-api-%EB%AA%A8%EB%93%88%ED%99%94-%EC%8B%9C%ED%82%A4%EA%B8%B0

https://doridori-samsam.tistory.com/42