Axios 라이브러리란

Axios는 Promise 기반의 HTTP 클라이언트 라이브러리이다. 이 라이브러리를 사용하면 브라우저에서 HTTP 요청을 만들고 응답을 받을 수 있다.

Promise 기반이란
Promise는 Javascript에서 비동기 처리를 위한 객체로서, 비동기 처리가 완료되면 결과를 반환하는 데 사용된다. Promise 객체는 비동기 작업을 시작하면 즉시 반환되며, 해당 작업이 완료되면 결과 값을 반환하는 방식으로 작동한다.

Promise는 3가지 상태를 갖는다.

• 대기(Pending): 비동기 처리가 아직 완료되지 않은 상태
• 이행(Fulfilled): 비동기 처리가 성공적으로 완료된 상태
• 거부(Rejected): 비동기 처리가 실패한 상태

Axios와 Ajax의 차이점

Axios와 Ajax 모두 클라이언트 측에서 서버와 데이터를 주고받는 기술이지만, 구현 방식과 특징에 차이가 있다.

Ajax는 Asynchronous JavaScript and XML의 약자로, JavaScript를 사용하여 비동기적으로 서버와 데이터를 주고받는 기술을 의미한다. XMLHttpRequest 객체를 사용하여 HTTP 요청을 생성하고, 이를 이용해 비동기적으로 서버로부터 데이터를 요청하고 응답을 받아 처리한다.

반면, axios는 Promise 기반의 HTTP 클라이언트 라이브러리입니다. 브라우저와 Node.js에서 모두 사용할 수 있으며, Ajax와 비슷한 방식으로 HTTP 요청을 생성하고 응답을 받는다. 하지만 Ajax와 달리 XMLHttpRequest를 직접 다루지 않아도 되며, Promise를 사용하여 비동기적으로 데이터를 처리한다.

또한, axois는 다음과 같은 추가 기능을 제공한다.

• HTTP 요청과 응답을 인터셉트할 수 있는 기능을 제공한다.
• JSON 데이터를 자동으로 직렬화하여 전송할 수 있다.
• CSRF(Cross-Site Request Forgery)보호를 위한 XSRF 토큰 자동 설정 기능을 제공한다.
• HTTP 요청을 취소할 수 있는 기능을 제공한다.

따라서, Ajax와 axios는 모두 클라이언트 측에서 서버와 데이터를 주고받는 기술이지만, axios는 Ajax보다 더 많은 기능을 제공하며, 코드를 간결하게 작성할 수 있다.

React도 js인데..

하지만 React는 Javascript 라이브러리임에도 HTTP 요청을 보내는 기능을 구현하기 위해 axios와 같은 라이브러리를 사용한다. 물론 Ajax를 사용할 수도 있다 하지만 대부분의 React 애플리케이션은 Axios 또는 Fetch API와 같은 라이브러리를 사용하는데 이유는 다음과 같다.

1. Axios와 Fetch API는 Ajax보다 더 간결하고 쉽게 사용할 수 있다. Axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, 비동기적인 요청을 보내는것이 간단하게 구현된다. Fetch API는 JavaSceript 내장 기능으로, Axios보다 더 적은 코드로 HTTP 요청을 처리할 수 있다.

2. Axios와 Fetch API는 브라우저와 Node.js에서 모두 사용할 수 있다. 이는 React 애플리케이션이 클라이언트-서버 양쪽에서 동작해야하는 경우, 같은 라이브러리를 사용하여 코드를 재사용할 수 있게 한다.

3. Axios와 Fetch API는 브라우저 측에서 CORS 문제를 해결하기 위한 기능을 제공한다. React 애플리케이션에서는 API 서버로의 HTTP 요청이 CORS(Cross-Origin Resource Sharing) 문제를 일으킬 수 있다. 이 때 Axios나 Fetch API를 사용하면, 브라우저에서 자동으로 CORS 문제를 처리할 수 있다.

   CORS(Cross-Origin Resource Sharing)
   웹 브라우저에서 실행되는 스크립트가 다른 도메인의 자원을 요청하는 것을 허용하는 메커니즘이다.

   CSRF(Cross-Site Request Forgery)
   웹 애플리케이션 취약점 중 하나로, 인증된 사용자의 권한을 이용해 악의적인 요청을 보내는 공격이다.

사용법

리액트에서는 Axios와 Fetch API 모두 많이 사용되지만 Axios가 더 많이 사용되는 경향이 있다. 이는 Axios가 브라우저와 Node.js 모두에서 사용할 수 있고, 직관적인 API를 제공하기 때문이다.

Axios

import axios from 'axios';

axios.get('/api/data')
  .then((response) => {
    // 요청이 성공했을 때 처리할 코드
    console.log(response.data);
  })
  .catch((error) => {
    // 요청이 실패했을 때 처리할 코드
    console.log(error);
  });

Fetch API

fetch('/api/data')
  .then((response) => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.log(error);
  });

설치방법

npm install axios --save