Axios (액시오스)

 

🟡 Axios

웹 브라우저와 Node.js에서 HTTP 요청을 보낼 수 있는 Promise 기반의 라이브러리.

 

◼️ 주요 특징

• GET, POST, PUT, PATCH, DELETE 등 다양한 HTTP 메서드 지원
• Promise 기반 비동기 처리
• 요청(Request)과 응답(Response) 가로채기(Interceptor) 지원
• 요청 및 응답 데이터를 자동으로 JSON 변환
• 요청 취소 및 타임아웃 설정 지원

 

◼️ 사용 방법

import axios from 'axios';

// 서버에서 상품 목록 데이터를 가져오는 예시
axios.get('https://api.example.com/products')
  .then(response => {
    // 요청이 성공했을 때 실행되는 코드
    console.log(response.data); // 서버에서 받은 데이터
  })
  .catch(error => {
    // 요청이 실패했을 때 실행되는 코드
    console.error('데이터를 가져오는 중 오류 발생:', error);
  });

• 동작 순서:
  1. axios.get()으로 서버에 요청을 보낸다.
  2. 요청이 성공하면 .then()이 실행된다.
  3. 서버에서 받은 데이터는 response.data에 저장된다.
  4. 요청이 실패하면 .catch()가 실행된다.

 

◼️ 주요 HTTP 메서드

메서드	역할
axios.get()	데이터 조회
axios.post()	데이터 생성
axios.put()	데이터 전체 수정
axios.patch()	데이터 일부 수정
axios.delete()	데이터 삭제
.then()	요청 성공 처리
.catch()	요청 실패 처리

 

◼️ 응답 객체(Response)

Axios는 요청이 성공하면 응답 객체를 반환한다.

axios.get("/users")
  .then((response) => {
    console.log(response.data);
    console.log(response.status);
    console.log(response.headers);
  });

• response.data: 서버에서 받은 데이터.
• response.status: HTTP 상태 코드.
• response.headers: 응답 헤더.
• response.config: 요청 설정 정보.

 

◼️ React에서 Axios 사용

React에서는 useEffect와 함께 사용하는 경우가 가장 많다.

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

useEffect(() => {
  axios.get("/products")
    .then((response) => {
      console.log(response.data);
    })
    .catch((error) => {
      console.error(error);
    });
}, []);

• 컴포넌트가 처음 렌더링될 때 서버에서 데이터를 가져오는 패턴으로 자주 사용된다.

 

 

📍 POINT 📍

✔️ Axios는 Promise 기반이므로 .then(), .catch() 또는 async/await와 함께 사용할 수 있다. ✔️

✔️ 서버에서 받은 실제 데이터는 대부분 response.data를 통해 사용한다. ✔️

✔️ React에서는 useEffect 안에서 API를 호출하는 경우가 일반적이다. ✔️

✔️ 최근에는 JavaScript의 내장 API인 fetch()도 많이 사용되지만,

Axios는 코드가 간결하고 다양한 편의 기능을 제공해 여전히 많이 사용된다. ✔️

 

---

 

🔗 axios 설치 🔗

terminal

npm install axios