React·Next.js에서 Axios를 제대로 쓰는 법

• Axios 소개 및 기본 개념
• Axios의 핵심 기능 및 사용법
• Axios를 활용한 프론트엔드 HTTP 요청 흐름
• Axios 학습을 위한 추천 자료 및 학습 경로
• 결론 및 정리
• 많이 찾는 질문

Axios 소개 및 기본 개념

왜 Axios가 필요한가?

Axios는 브라우저와 Node.js 환경에서 HTTP 요청을 보다 안정적이고 직관적으로 다루기 위해 설계된 Promise 기반 라이브러리입니다. 웹 애플리케이션은 사용자의 입력에 따라 서버와 데이터를 주고받는 작업이 매우 빈번하게 이루어지는데, 이 과정에서 단순한 GET/POST 요청만 필요한 것은 아닙니다. 인증 토큰을 헤더에 포함해야 할 때도 있고, 에러 상태에 따라 각각 다른 UI를 보여줘야 하며, 요청을 취소하거나 중복 요청을 방지해야 하는 경우도 있습니다.

Axios가 해결하는 핵심 문제

Axios는 이러한 복잡한 문제들을 해결하기 위해 다음과 같은 특징을 제공합니다.
1) 자동 JSON 변환 기능
2) 요청 및 응답 인터셉터 제공
3) 공통 설정(baseURL, headers 등) 중앙화
4) 요청 취소 기능(CancelToken / AbortController)
5) 다양한 환경에서 동작(브라우저 · Node.js)

이러한 기능들을 통해 Axios는 프론트엔드 개발자가 백엔드 API와 통신하는 구조를 더 안정적으로 설계하게 도와주며, 특히 React, Next.js, Vue 같은 SPA 프레임워크와 결합했을 때 그 진가를 발휘합니다.

Axios의 핵심 기능 및 사용법

Axios 기능 개요

Axios는 단순한 HTTP 라이브러리가 아니라 실무 프로젝트에 최적화된 통신 관리 도구입니다. 아래에서는 각 기능을 하나씩 깊이 있게 설명합니다.

1) 자동 JSON 변환

Axios는 서버로부터 전달받은 응답을 자동으로 JSON 형태로 변환하여 반환합니다. Fetch API에서는 res.json()을 반드시 호출해야 하지만, Axios는 이러한 반복 작업을 내부적으로 처리하여 코드 간결성을 높이고 실수 가능성을 줄입니다.

또한 Axios는 응답 헤더의 Content-Type까지 자동 분석하여 JSON이 아닐 경우에도 적절한 형태로 데이터 파싱을 진행합니다. 예를 들어 서버가 문자열을 반환하는 경우에도 Axios는 이를 개발자가 쉽게 이해할 수 있는 데이터 형태로 가공합니다.

2) 요청 메서드 직관성

Axios는 각 HTTP 동작을 명확하게 표현하는 메서드를 제공합니다. 예를 들어 axios.get(), axios.post()처럼 함수 이름만 보아도 해당 요청이 어떤 의도를 가지고 있는지 명확하게 파악할 수 있습니다.

Fetch API는 fetch() 하나로 모든 요청을 처리하기 때문에 method 옵션을 추가해야 하고, 데이터 전송 시 헤더 설정까지 직접 구성해야 하므로 코드가 길어지고 실수 위험도 증가합니다. 반면 Axios는 메서드별로 구조가 이미 정의되어 있어 개발 생산성과 가독성이 모두 향상됩니다.

3) Axios 인스턴스 관리

Axios의 핵심 기능 중 하나는 create()를 통해 공통 설정을 가진 인스턴스를 생성할 수 있다는 점입니다. 실무에서는 baseURL, headers, timeout, withCredentials 등 공통 설정이 여러 API 요청에서 반복됩니다. 이를 한 곳에서 관리하지 않으면 유지보수가 어렵고 코드 중복이 심해집니다.

Axios 인스턴스를 사용하면 프로젝트 규모가 커지더라도 모든 API 요청을 일관된 설정으로 관리할 수 있으며, 인증 토큰 자동 주입, 에러 처리 로직 통합, 공통 파라미터 적용 등을 쉽게 구조화할 수 있습니다.

4) 인터셉터(Interceptors)
인터셉터는 Axios의 실전 활용을 가능하게 하는 핵심 기능 중 하나입니다. 요청이 실제로 전송되기 전 또는 응답을 받기 전에 특정 로직을 삽입할 수 있어, 모든 API에 공통적으로 적용해야 하는 기능을 중앙에서 제어할 수 있습니다.

예를 들어, 요청 인터셉터에서는 Access Token을 자동으로 헤더에 추가하거나, 요청 로그를 기록할 수 있습니다. 응답 인터셉터에서는 서버에서 401 오류가 발생했을 때 자동으로 Refresh Token을 요청하거나, 응답 데이터를 일관된 구조로 변환하는 등의 작업을 수행할 수 있습니다.

이러한 중앙 제어 구조 덕분에 코드 중복이 크게 줄어들고, 프로젝트 전체의 안정성과 유지보수성이 향상됩니다.

Axios 인스턴스 + 인터셉터 통합 실무 예제

실무에서는 Axios 인스턴스에 요청/응답 인터셉터를 결합해 인증 토큰 주입, 401 자동 처리, 공통 에러 핸들링 등을 중앙에서 제어합니다. 아래 예제는 대부분의 프론트엔드 프로젝트에서 표준처럼 사용되는 구조입니다.

// axios.js — 공통 인스턴스 구성
import axios from 'axios';

const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 5000,
});

// 요청 인터셉터: 토큰 자동 추가
api.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('access_token');
    if (token) config.headers.Authorization = `Bearer ${token}`;
    return config;
  },
  (error) => Promise.reject(error)
);

// 응답 인터셉터: 401 처리, 공통 에러 정리
api.interceptors.response.use(
  (res) => res,
  async (error) => {
    if (error.response?.status === 401) {
      console.warn('토큰 만료됨 → 사용자 재로그인 필요');
    }
    return Promise.reject(error);
  }
);

export default api;

이 구조를 사용하면 모든 API 요청 흐름이 일관된 프로세스에서 관리되며, 인증·로그 수집·에러 처리의 중복을 제거할 수 있어 유지보수성이 크게 향상됩니다.

5) 요청 취소 기능
실시간 검색창처럼 사용자가 입력할 때마다 API 요청이 발생하는 UI에서는 이전 요청을 적절히 취소해야 최신 데이터만 반영할 수 있습니다. 그렇지 않으면 응답 순서가 뒤바뀌어 잘못된 결과가 화면에 표시되거나, 쓸데없이 서버 요청이 누적되는 문제가 생깁니다.

Axios는 CancelToken과 AbortController를 지원하여 이러한 문제를 해결합니다. 새로운 요청이 발생하면 이전 요청을 즉시 취소할 수 있어 네트워크 비용을 절감하고 UI의 안정성을 확보할 수 있습니다.

특히 자동완성 기능, 실시간 필터링, 그래프 데이터 갱신 등 빠른 사용자 입력이 발생하는 상황에서 요청 취소 기능은 필수적입니다.

6) 에러 객체 정규화

Axios의 가장 강력한 기능 중 하나가 바로 “에러 객체 정규화”입니다. 실전 프로젝트에서는 에러가 단순히 발생했다는 사실보다, **어떤 종류의 에러인지 구분하고, 일관된 형식으로 처리할 수 있느냐가 훨씬 중요**합니다.

Fetch API는 네트워크 오류가 발생했을 때만 에러를 throw하고, HTTP 상태 코드가 400, 404, 500이어도 기본적으로 에러로 간주하지 않습니다. 즉, 개발자가 일일이 status 코드를 확인해야 하므로 에러 처리 코드가 중복되고 복잡해지기 쉽습니다.

반면 Axios는 모든 HTTP 오류 상태(400, 401, 403, 404, 500 등)에 대해 **일관된 구조의 에러 객체를 자동으로 생성**합니다. Axios의 에러 객체는 다음과 같은 형태를 가집니다.

• err.response : 서버가 응답했지만 오류 상태일 때(400~500대)
• err.request : 요청은 보내졌지만 서버 응답이 없을 때(네트워크 문제 등)
• err.message : 기타 예기치 않은 오류(코드 오류, 실행 환경 문제 등)

이 구조 덕분에 프론트엔드 개발자는 에러 처리 로직을 훨씬 정교하게 설계할 수 있으며, 다음과 같이 **상태 코드별로 구체적인 대응 전략**을 세울 수 있습니다.

• 400 Bad Request → 입력값 검증 메시지 노출
• 401 Unauthorized → 자동 로그아웃 또는 Access Token 재발급 흐름 실행
• 403 Forbidden → 접근 권한 없음 안내
• 404 Not Found → 페이지 또는 리소스 없음 UI 표시
• 500 Internal Server Error → 서버 문제 안내 및 재시도 유도

또한 Axios는 인터셉터와 함께 사용할 때 에러 처리 효율이 극대화됩니다. 예를 들어, 401 응답이 들어오면 인터셉터에서 공통적으로 처리하여 모든 API마다 따로 코드를 작성할 필요가 없습니다.

실무에서는 “에러 객체 정규화 + 인터셉터 기반 중앙 에러 처리” 조합이 사실상 표준이며, 이를 통해 에러 핸들링을 한 곳에서 통제할 수 있어 유지보수성이 크게 향상됩니다.

Axios 에러 객체 구조 비교 표 (정리)

아래 표는 Axios 에러 객체가 상황에 따라 어떻게 구성되는지 시각적으로 이해하기 쉽게 정리한 것입니다. 실무에서 에러 로그를 분석하거나 공통 에러 핸들러를 설계할 때 매우 유용합니다.

Axios vs Fetch 기능 비교 표

Axios와 Fetch는 동일한 HTTP 요청 도구이지만, 제공 기능과 실무 적합성에서 큰 차이가 있습니다. 아래 표는 두 방식을 한눈에 비교할 수 있도록 정리한 내용입니다.

이 비교 표를 통해 Axios가 실무에서 왜 더 빈번하게 선택되는지 명확하게 이해할 수 있습니다.

이 구조를 이해하면 API 요청 실패의 원인을 매우 빠르게 파악할 수 있으며, 상태 코드별 UI 피드백·재시도 로직·토큰 재발급 흐름 등을 체계적으로 설계할 수 있습니다.

Axios 코드 실습: GET · POST 요청 따라하기

이제 Axios의 기본 요청을 실습해보겠습니다. 아래 예제는 브라우저 환경과 Node.js 모두 동일하게 작동하며, REST API 구조를 이해하는 데 큰 도움이 됩니다.

1) GET 요청 실습 예제

아래 예제에서 사용하는 URL https://jsonplaceholder.typicode.com/posts/1 (공식 문서 보기) 은 실제 서버가 아니라, 학습용으로 공개된 무료 테스트 API입니다.
JSONPlaceholder는 가짜 데이터(Fake REST API)를 제공하여 GET, POST 같은 HTTP 요청을 안전하게 연습할 수 있도록 도와줍니다.
즉, 서버 구축 없이도 API 요청 구조를 연습할 수 있는 매우 유용한 도구입니다.

axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then((res) => {
    console.log('GET 결과:', res.data);
  })
  .catch((err) => {
    console.error('에러 발생:', err.message);
  });

2) POST 요청 실습 예제

POST 요청 실습에서도 JSONPlaceholder를 활용합니다.
https://jsonplaceholder.typicode.com/posts 엔드포인트는 실제로 데이터베이스에 저장되지는 않지만, 요청한 내용을 그대로 응답으로 돌려주기 때문에 POST 요청 구조를 이해하는 데 매우 유용합니다.

axios.post('https://jsonplaceholder.typicode.com/posts', {
  title: 'Axios POST 테스트',
  body: '이 요청은 JSONPlaceholder에서 테스트용으로 처리됩니다.',
  userId: 1,
})
  .then((res) => {
    console.log('POST 결과:', res.data);
  })
  .catch((err) => {
    console.error('POST 에러:', err.message);
  });

3) PATCH 요청 실습 예제

PATCH는 리소스 전체가 아닌 특정 필드만 수정할 때 사용됩니다.

axios.patch('https://jsonplaceholder.typicode.com/posts/1', {
  title: '수정된 제목'
})
  .then((res) => {
    console.log('PATCH 결과:', res.data);
  })
  .catch((err) => {
    console.error('PATCH 에러:', err.message);
  });

4) DELETE 요청 실습 예제

DELETE 요청은 특정 리소스를 삭제할 때 사용됩니다.

axios.delete('https://jsonplaceholder.typicode.com/posts/1')
  .then((res) => {
    console.log('DELETE 결과:', res.status);
  })
  .catch((err) => {
    console.error('DELETE 에러:', err.message);
  });

5) Query Parameters(GET 파라미터) 실습 예제

params 옵션을 사용하면 쿼리스트링이 자동 구성됩니다.

axios.get('https://jsonplaceholder.typicode.com/posts', {
  params: {
    userId: 1,
    _limit: 5
  }
})
  .then((res) => {
    console.log('Query Params 결과:', res.data);
  })
  .catch((err) => {
    console.error('Query Params 에러:', err.message);
  });

Axios를 활용한 프론트엔드 HTTP 요청 흐름

프론트엔드 요청 구조 이해하기

프론트엔드에서 Axios가 어떻게 동작하는지를 이해하면 API 통신 구조 전체가 눈에 보이기 시작합니다. 단순히 “요청 보내기 → 응답 받기”가 아니라, Axios는 **요청 생성 → 인터셉터 전처리 → 서버 통신 → 응답 후처리 → UI 반영**이라는 하나의 긴 파이프라인을 구성합니다.

요청이 시작되는 단계

① 사용자의 액션 발생
페이지가 처음 로드되거나 버튼을 클릭하는 등 사용자의 행동이 API 요청의 시작점이 됩니다. 예를 들어, 상품 목록 페이지에서는 컴포넌트가 렌더링되자마자 GET 요청을 보내 데이터를 불러옵니다.

② Axios가 요청 설정을 기반으로 HTTP 요청을 생성
요청이 시작되면 Axios는 인스턴스에 등록된 설정(baseURL, headers, timeout 등)을 자동으로 적용합니다. 이 과정에서 필요한 인증 토큰이나 공통 파라미터가 자동으로 포함됩니다.

③ 요청 인터셉터(Request Interceptor) 실행
이 단계에서 Access Token 추가, 요청 로깅, 요청 시작 시간 기록 등의 전처리가 이루어집니다. 실무에서는 가장 많이 활용되는 지점입니다.

④ 서버에 HTTP 요청 전송
Axios는 브라우저의 XMLHttpRequest(XHR) 또는 Fetch 기반 인터페이스를 사용해 서버와 실제 통신을 수행합니다. 네트워크 레벨의 요청이 이루어지는 단계입니다.

서버 응답 처리 단계

⑤ 서버에서 응답 반환(Response)
서버가 응답을 보내면 Axios가 이를 자동으로 JSON 파싱합니다. 에러 상태 코드(400, 401, 403, 500 등)가 포함된 경우도 이 시점에서 감지됩니다.

⑥ 응답 인터셉터(Response Interceptor) 후처리
토큰 만료(401) 발생 시 자동 재발급 요청, 응답 데이터 구조 통일, API 호출 실패 시 글로벌 에러 UI 표시 등 핵심적인 후처리가 이루어지는 구간입니다.

⑦ UI 업데이트
Axios에서 처리된 최종 데이터가 컴포넌트 상태(state)에 반영되어 화면이 업데이트됩니다. React에서는 useState, useEffect와 함께 흐름이 자연스럽게 연결됩니다.

실무에서 특히 중요한 핵심 포인트
• Axios 인스턴스를 사용하면 모든 요청 흐름이 동일한 구조를 갖게 되어 유지보수가 쉬워집니다.
• 인터셉터는 인증 처리와 전역 에러 처리의 핵심 요소입니다.
• 요청 취소 기능은 검색 입력 UI나 실시간 데이터 페이지에서 필수적입니다.
• React Query와 결합하면 “요청 흐름 + 캐싱 + 리페칭”까지 완전 자동화됩니다.

즉, Axios는 단순한 요청 도구가 아니라 프론트엔드 앱 전체의 “데이터 흐름”을 구성하는 중요한 기반 기술입니다.

React 환경에서의 Axios 실전 패턴

React에서는 Axios를 컴포넌트 생명주기(useEffect)와 결합해 사용하는 패턴이 일반적입니다. 아래는 가장 많이 사용되는 구조입니다.

• 컴포넌트가 마운트될 때 API 요청 수행
• 언마운트 시 요청 취소 처리
• 로딩/에러/데이터 상태를 useState로 관리

이 구조는 모든 React 환경에서 공통으로 사용하는 패턴이며, 실무에서 Axios를 활용하는 기본 뼈대가 됩니다.

import { useEffect, useState } from 'react';
import api from '../lib/axios';

export default function Post() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();

    api.get('/posts/1', { signal: controller.signal })
      .then((res) => setData(res.data))
      .catch((err) => {
        if (err.name !== 'CanceledError') setError(err.message);
      })
      .finally(() => setLoading(false));

    return () => controller.abort();
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return <div>{data.title}</div>;
}

Next.js(App Router)에서의 Axios 실전 패턴

Next.js App Router 환경에서는 서버 컴포넌트에서는 fetch를, 클라이언트 컴포넌트에서 Axios를 사용하는 패턴이 널리 쓰입니다. 특히 인증 기반 API 요청은 클라이언트에서 Axios 인스턴스를 사용해 처리합니다.

또한 Next.js 프로젝트에서는 /lib/axios.js에 인스턴스를 생성하고, /services 디렉터리에 API 모듈을 정리해 구성하는 것이 실무 표준 구조입니다.

// services/postService.js
import api from '../lib/axios';

export const getPost = async (id) => {
  const res = await api.get(`/posts/${id}`);
  return res.data;
};

// app/post/page.jsx (Client Component)
'use client';
import { useEffect, useState } from 'react';
import { getPost } from '../../services/postService';

export default function Page() {
  const [post, setPost] = useState(null);

  useEffect(() => {
    getPost(1).then(setPost);
  }, []);

  if (!post) return <div>Loading...</div>;
  return <div>{post.title}</div>;
}

React Query + Axios 통합 패턴

실무에서 가장 강력한 조합은 Axios(HTTP 요청) + React Query(서버 상태 관리)입니다. React Query가 캐싱·리페칭·에러 관리 등을 자동으로 처리하기 때문에 API 호출 코드를 획기적으로 단순화할 수 있습니다.

import { useQuery } from '@tanstack/react-query';
import { getPost } from '../services/postService';

export default function PostQuery() {
  const { data, isLoading, isError } = useQuery({
    queryKey: ['post', 1],
    queryFn: () => getPost(1),
  });

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error 발생</div>;

  return <h1>{data.title}</h1>;
}

이 패턴을 적용하면 Axios는 HTTP 통신만 담당하고 React Query가 데이터 캐싱·동기화 관리를 전부 처리하기 때문에, 실무 프로젝트의 품질과 생산성이 대폭 향상됩니다.

Axios 학습을 위한 추천 자료 및 학습 경로

Axios를 깊이 있게 학습하기 위해서는 단순히 문서를 읽는 것을 넘어, 실제 요청 흐름을 이해하고 다양한 상황에서 Axios가 어떻게 동작하는지 체계적으로 학습하는 것이 중요합니다. 아래는 초급 → 실전까지 자연스럽게 이어지는 학습 경로입니다.

① 공식 문서로 기본 구조 이해하기
Axios 메서드 구조(GET/POST/PUT/DELETE), 옵션(config), 기본적인 응답 형태를 파악하는 것이 첫 단계입니다. 문서에서 예제 코드를 직접 실행해보는 것이 학습 효율을 높입니다.

② JSONPlaceholder로 실습 환경 구성하기
무료 테스트 API를 활용해 GET·POST·PUT·DELETE 요청을 직접 실행해보면 HTTP 구조가 빠르게 익혀집니다. 실전 API 없이도 안전하게 연습할 수 있습니다.

③ Axios 인스턴스 사용하여 공통 설정 중앙화 경험하기
baseURL, headers, timeout 등을 인스턴스로 분리하는 순간, 프로젝트 구조가 얼마나 정돈되는지 체감할 수 있습니다. 실무와 가장 가까운 학습 단계입니다.

④ 인터셉터로 인증 흐름(토큰) 자동화하기
요청 시 Access Token 자동 첨부, 응답에서 401 감지 시 토큰 재발급 처리 등 실무에서 반드시 필요한 인증 흐름을 구축합니다. Axios 학습의 핵심입니다.

⑤ 에러 처리 기준 만들기
err.response / err.request / err.message 구분과 상태 코드별 처리 전략을 정리하면 프로젝트 전체의 안정성이 크게 향상됩니다.

⑥ 요청 취소 기능 실습해보기
검색창 자동완성, 빠른 입력, 차트 데이터 실시간 반영 상황에서 취소 기능을 적용해보면 Axios의 실전 강점을 직접 체감할 수 있습니다.

⑦ React Query + Axios 조합으로 서버 상태 관리 완성하기
React Query가 캐싱·리페칭을 맡고, Axios는 HTTP 요청을 담당하는 조합은 실무에서 사실상 표준입니다. 프로젝트 구조가 한 단계 성숙해집니다.

추가 학습 추천
• GitHub Axios 공식 레포지토리에서 Issue/PR 읽어보기
• 네트워크 탭(Network Panel) 활용해 요청 흐름 분석하기
• Next.js API Route와 Axios를 연결해 full-stack 흐름 경험하기

이러한 과정을 순서대로 수행하면 Axios의 기초 원리부터 실전 고급 패턴까지 완벽하게 다룰 수 있게 됩니다.

결론 및 정리

Axios가 실무에서 중요한 이유

Axios는 단순한 HTTP 요청 유틸리티를 넘어, 프론트엔드 애플리케이션의 “데이터 흐름 전체를 관리하는 핵심 인프라” 역할을 수행합니다. 특히 React · Next.js 기반 프로젝트에서는 Axios가 제공하는 인터셉터, 인스턴스, 에러 정규화, 취소 기능 등이 구조적 안정성을 만들어내며, API 통신의 복잡성을 크게 줄여줍니다.

아래는 Axios를 학습한 내용을 종합적으로 이해할 수 있도록 정리한 핵심 포인트입니다.

① 데이터 처리의 자동화
Axios는 응답을 자동으로 JSON 변환하고, 요청 설정도 일관된 형태로 관리합니다. fetch() 대비 반복 코드가 줄어들고 실수 발생 가능성이 감소합니다.

② 인스턴스를 통한 프로젝트 구조화
baseURL, headers, timeout, withCredentials 등 공통 설정을 중앙에서 관리할 수 있어 프로젝트 규모가 커질수록 유지보수가 훨씬 쉬워집니다.

③ 인터셉터 기반의 요청 및 응답 흐름 제어
요청 인터셉터는 토큰 자동 주입, 응답 인터셉터는 401 에러 기반의 토큰 재발급 처리 등 실무 핵심 기능의 중심입니다. 이를 통해 모든 API 요청 흐름을 일관된 프로세스로 통제할 수 있습니다.

④ 정교한 에러 처리 구조
err.response / err.request / err.message로 구분되는 Axios 고유의 에러 객체 구조는 실전에서 매우 강력합니다. 상태 코드별 UI 피드백, 사용자 안내, 로그 수집이 가능해지며 에러 핸들링 품질이 높아집니다.

⑤ 불필요한 요청 방지 및 성능 관리
CancelToken과 AbortController를 활용하면 타이핑 기반 검색, 실시간 UI에서 중복 요청을 제거할 수 있어 성능과 사용자 경험이 모두 향상됩니다.

⑥ React Query와의 조합에서 완성되는 서버 상태 관리
Axios는 HTTP 요청을 담당하고, React Query는 캐싱·리페칭·에러 관리 등 서버 상태 관리를 맡습니다. 이 조합은 실무에서 사실상 표준이며, 데이터 중심 UI를 구성하는 데 가장 안정적인 구조입니다.

⑦ Next.js에서의 실전 활용성
Next.js App Router 기반 프로젝트에서는 서버 컴포넌트(fetch)와 클라이언트 상태 관리(Axios)를 병행하는 형태가 일반적입니다. Axios는 인증 기반 API, 동적 요청, 클라이언트 중심 비동기 흐름에서 특히 큰 가치를 제공합니다.

종합적으로, Axios는 “요청 도구를 넘어서 프론트엔드 데이터 아키텍처의 기반”이며, 프로젝트의 안정성과 확장성을 높여주는 필수 라이브러리입니다. Axios를 깊이 있게 이해하면 API 중심 앱의 구조 설계 능력이 크게 향상되며, React / Next.js 실무 전반에서도 높은 생산성을 확보할 수 있습니다.

많이 찾는 질문

Q. Axios와 Fetch API는 어떤 차이가 있나요?

Axios는 자동 JSON 변환, 요청 취소, 인터셉터, 에러 구조화 등 Fetch보다 실무 중심 기능을 제공합니다. Fetch는 가볍지만 이러한 기능을 직접 구현해야 하므로 생산성이 떨어질 수 있습니다.

Q. Axios는 React Query와 함께 사용해야 하나요?

React Query는 서버 상태 관리 도구이며, Axios는 HTTP 요청 도구입니다. 서로 목적이 달라 함께 사용할 때 가장 강력한 설계가 가능합니다.

Q. Next.js에서는 Axios를 어떻게 구조화하나요?

인스턴스를 /lib/axios.js로 분리하고, 서비스별 모듈(api/user.js, api/auth.js 등)을 구성하는 방식이 대다수 프로젝트에서 사용됩니다. 서버 컴포넌트에서는 fetch를 사용하고 클라이언트 상태 관리는 Axios를 활용하는 혼합 구조도 매우 일반적입니다.

Q. 에러 처리 로직은 어떻게 설계하는 것이 가장 좋나요?

Axios의 에러 객체(err.response, err.request, err.message)를 기준으로 상태 코드별 전략을 세우는 것이 핵심입니다. 인터셉터에서 401 처리, 글로벌 에러 핸들러에서 공통 오류 메시지 관리, 컴포넌트에서는 사용자 UI에 맞춘 안내를 출력하는 구조가 권장됩니다.

Q. API 요청이 너무 많을 때 성능을 최적화하는 방법이 있나요?

요청 취소(AbortController), 디바운싱/쓰로틀링, Axios 인스턴스의 keep-alive 옵션, React Query의 캐싱/리페칭 제어를 함께 사용하면 성능을 안정적으로 개선할 수 있습니다.

Q. 인터셉터는 어디까지 사용해야 하나요?

인터셉터는 토큰 처리, 공통 헤더 설정, 공통 에러 처리까지는 매우 효과적입니다. 다만, 개별 API 전용 로직을 인터셉터에 넣으면 복잡성이 증가하므로 “전역 적용이 필요한 로직만” 넣는 것이 최선입니다.

Q. 파일 업로드/다운로드도 Axios로 가능한가요?

가능합니다. multipart/form-data 업로드, Blob/Binary 파일 다운로드 모두 지원합니다. 특히 responseType: ‘blob’ 설정을 활용하면 이미지, PDF 등 바이너리 파일을 안정적으로 처리할 수 있습니다.

Q. Axios 요청이 느릴 때 원인을 어떻게 파악하나요?

네트워크 탭에서 TTFB, waiting, content download 구간을 분석하고, Axios 인터셉터에서 요청 시작/종료 시점을 기록하여 API 및 클라이언트 처리 시간을 분리 분석하면 문제 원인을 빠르게 진단할 수 있습니다.