React axios

---

🌐 axios란?

정의

axios는 브라우저와 Node.js 환경에서 사용할 수 있는 Promise 기반 HTTP 클라이언트다.

fetch보다 사용 패턴이 단순하고, 응답 변환과 에러 처리, 인터셉터 같은 기능을 함께 쓰기 좋다.

🧩 특징

• Promise 기반으로 비동기 요청을 처리한다.
• 요청/응답 인터셉터를 사용할 수 있다.
• JSON 응답 처리와 에러 처리가 비교적 편하다.
• timeout, headers, baseURL 같은 공통 설정을 잡기 좋다.

🛠️ 설치

npm i axios

⚙️ 기본 사용 예시

import axios from "axios";

const URL = "https://jsonplaceholder.typicode.com/todos";

async function fetchTodos() {
  try {
    const response = await axios.get(URL);
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

🧪 React에서 자주 쓰는 형태

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

function TodoList() {
  const [data, setData] = useState([]);

  useEffect(() => {
    const loadTodos = async () => {
      const response = await axios.get("https://jsonplaceholder.typicode.com/todos");
      setData(response.data);
    };

    loadTodos();
  }, []);

  return (
    <div>
      {data.map((todo) => (
        <p key={todo.id}>{todo.title}</p>
      ))}
    </div>
  );
}

⚖️ 장점과 단점

장점

• 코드가 비교적 간단하다.
• 응답 데이터 처리와 에러 처리가 편하다.
• 실제 프로젝트에서 공통 설정을 묶기 좋다.

단점

• fetch보다 외부 의존성이 하나 더 생긴다.
• 작은 프로젝트에서는 굳이 필요하지 않을 수 있다.

📌 정리

• axios는 HTTP 요청을 편하게 다루기 위한 라이브러리다.
• React에서는 useEffect와 함께 데이터를 가져오는 용도로 자주 사용한다.
• 서버 상태 관리가 많아지면 React Query와 함께 비교해서 보는 것도 좋다.

---

연결문서

• HTTP
• useEffect
• React Query(Tanstack Query)
• javascript-AsyncAwait