Axios

Axios란? JavaScript에서 사용하는 HTTP 통신 라이브러리

웹 애플리케이션을 개발하다 보면, 서버로부터 데이터를 받아오거나 서버에 데이터를 보내야 할 때가 많습니다.
이럴 때 사용하는 대표적인 도구가 바로 Axios입니다.
Axios는 JavaScript 기반의 HTTP 클라이언트 라이브러리로, 주로 React와 같은 프론트엔드 환경에서 많이 사용됩니다.

1. Axios란?

Axios는 Promise 기반의 HTTP 클라이언트로, 브라우저와 Node.js 모두에서 동작합니다.
서버와의 비동기 통신을 보다 간단하고 직관적으로 작성할 수 있도록 도와줍니다.

주요 특징

• Promise 기반으로 비동기 처리가 용이
• 자동으로 JSON 데이터 변환
• 요청 및 응답 인터셉터 지원
• 요청 취소, 타임아웃, 응답 스키마 지정 가능
• 브라우저와 Node.js 양쪽 모두 사용 가능

2. 설치 방법

npm install axios

3. 기본 사용법

import axios from 'axios';

// GET 요청
axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

// POST 요청
axios.post('https://jsonplaceholder.typicode.com/posts', {
  title: '새 게시물',
  body: '내용입니다',
  userId: 1
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

4. fetch와의 차이점

항목	Axios	fetch()
기본 지원	외부 라이브러리 필요	브라우저 내장 API
JSON 자동 처리	자동 변환	수동으로 res.json() 필요
인터셉터 기능	지원	미지원
요청 취소	지원	AbortController 필요
에러 처리	상태 코드별 처리 용이	직접 분기 필요

5. React에서의 Axios 사용 예제

import { useEffect, useState } from "react";
import axios from "axios";

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/users")
      .then(res => {
        setUsers(res.data);
      })
      .catch(err => {
        console.error("에러 발생:", err);
      });
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UserList;

6. Axios로 FastAPI와 연동하기

Axios를 통해 React에서 FastAPI 백엔드로 POST 요청을 보낼 수도 있습니다. 예를 들어 이벤트 등록 시:

axios.post("http://localhost:8000/events/", {
  id: 1,
  title: "세미나",
  description: "기술 발표 세미나",
  tags: ["react", "fastapi"],
  location: "서울"
})
.then(res => console.log(res.data))
.catch(err => console.error(err));