리액트 API 연동: Axios 한 번에 정리(로딩·에러·취소)

Axios는 인스턴스·인터셉터로 공통 헤더·에러 포맷·타임아웃을 표준화하기에 적합합니다. 예제로 실무 기본 흐름(로딩/에러/요청 취소)을 알아봅니다.

fetch vs Axios: 무엇을 쓸까?

fetch: 브라우저 내장(외부 설치 불필요). AbortController로 취소, Response.ok 체크·직접 파싱 필요.
Axios: 인스턴스/인터셉터·타임아웃·JSON 자동 변환 등 DX(개발 편의)가 좋음. Node/브라우저 양쪽에서 동일 코드로 쓰기 쉬움.

가이드: 의존성 최소·간단한 연동이면 fetch, 범용 공통 헤더·토큰·리트라이·에러 표준화가 필요하면 Axios 권장.

1) axios 인스턴스 + 인터셉터

1. 패키지 설치

npm i axios

2. HTTP 인스턴스 파일

// src/lib/http.js
import axios from "axios";

export const http = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com",
  timeout: 10000,
});

// 요청 인터셉터(토큰/공통 헤더)
http.interceptors.request.use((config) => {
  // const token = localStorage.getItem("token");
  // if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

// 응답 인터셉터(에러 메시지 표준화)
http.interceptors.response.use(
  (res) => res,
  (error) => {
    const status = error.response?.status;
    const message = error.response?.data?.message || error.message;
    return Promise.reject(new Error(status ? `[${status}] ${message}` : message));
  }
);

2) 예제: UsersAxiosBasic (로딩/에러/취소)

// src/examples/UsersAxiosBasic.jsx
import React, { useEffect, useState } from "react";
import { http } from "../lib/http";

export default function UsersAxiosBasic() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [err, setErr] = useState(null);

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

    async function run() {
      setLoading(true); setErr(null);
      try {
        const { data } = await http.get("/users", { signal: ctrl.signal });
        setData(data);
      } catch (e) {
        if (e.name !== "CanceledError") setErr(e);
      } finally {
        setLoading(false);
      }
    }
    run();

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

  if (loading) return <p>로딩 중...</p>;
  if (err) return <p>에러: {String(err.message || err)}</p>;
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

▼ 실행 화면: UsersAxiosBasic (axios) 선택 시 /users API를 호출해 로딩 → 사용자 JSON 목록이 출력되는 모습(에러 발생 시 메시지 표시).