Axios

Axios는 자바스크립트를 기반으로 하는 HTTP 클라이언트 라이브러리로, 비동기적인 방식으로 서버와 데이터를 주고받을 수 있도록 도와주는 도구입니다. 주로 웹 애플리케이션에서 API 요청을 보내거나 서버와 통신하는데 사용됩니다.

Axios의 주요 특징과 기능:

1. 간편한 API 사용: Axios는 Promise 기반으로 작성되어 있으며, 프로미스를 지원하는 라이브러리와 쉽게 통합될 수 있습니다. 또한 비동기 코드를 작성할 때 콜백 대신에 간결한 문법을 사용할 수 있어 코드의 가독성을 높여줍니다.

2. 브라우저 및 Node.js 지원: Axios는 브라우저 환경과 Node.js 환경 모두에서 동작하도록 설계되어 있어 클라이언트 사이드와 서버 사이드 양쪽에서 사용할 수 있습니다.

3. 자동 변환 기능: Axios는 요청과 응답 데이터를 자동으로 변환할 수 있는 기능을 제공합니다. 예를 들어 JSON 데이터를 자바스크립트 객체로 자동 변환하거나, 반대로 자바스크립트 객체를 JSON 문자열로 변환할 수 있습니다.

4. 요청과 응답 인터셉터: Axios는 요청과 응답에 대한 인터셉터(Interceptor)를 제공하여 요청 전송 전과 응답 수신 후에 추가적인 로직을 실행할 수 있습니다. 예를 들어, 헤더를 추가하거나 에러 처리를 위한 전역 설정을 할 수 있습니다.

5. 요청 취소와 타임아웃 설정: Axios는 요청 취소를 지원하며, 특정 시간 이상 소요되는 요청에 대해 타임아웃을 설정할 수 있습니다.

6. XSRF(CSRF) 방어 기능: Axios는 기본적으로 XSRF(CSRF) 방어를 위해 쿠키를 사용하거나 사용자가 직접 헤더를 설정할 수 있도록 옵션을 제공합니다.

7. 여러 요청 동시 처리: Axios는 여러 요청을 동시에 처리할 수 있도록 지원합니다. 이를 통해 병렬로 여러 API를 호출하거나 응답 시간을 단축할 수 있습니다.

Axios는 다른 HTTP 클라이언트인 fetch와 비교했을 때 더 많은 기능과 더 편리한 API를 제공하는 것이 특징입니다.

예: axios Get방식 이 예제는 간단한 user 정보를 가져오는 웹 애플리케이션입니다.

import "./styles.css";
import { useState, useEffect } from "react";
import axios from "axios";
export default function App() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // 컴포넌트가 마운트되면 API 요청을 보냅니다.
    getUser();
  }, []);

  const getUser = () => {
    // Axios를 사용하여 API 요청을 보냅니다.
    axios
      .get("https://jsonplaceholder.typicode.com/posts/1")
      .then((response) => {
        console.log(response.data);
        setUser(response.data);
      })
      .catch((error) => {
        console.error("Error fetching weather data:", error);
      });
  };
  return (
    <div className="App">
      {user ? (
        <div>
          <h2>{user.title}</h2>
          <p>{user.body}</p>
        </div>
      ) : (
        <p>Loading weather data...</p>
      )}
    </div>
  );
}