[React] Axios 사용법

 Axios는 javascript에서 Rest API와 쉽게 통신할 수 있도록 해주는 라이브러리입니다. fetch API와 같은 역할을 하나 json 형식으로 통신을 할 때 더 편리합니다. 일반 자바스크립트에서도 axios 라이브러리를 불러와사용할 수 있고, react에서는 npm 패키지를 이용할 수 있습니다.

npm install --save axios

 위 코드로 패키지를 설치해주세요.

 

기본적인 사용법은 아래와 같습니다.

import axios from "axios";

async function getApi() {
  const response = await axios.get("url");
  return response;
}

async function postApi() {
  const response = await axios.post("url", { data: "hello api" });
  return response;
}

 기본적으로 axios는 서버와의 통신을 해야하기 때문에 딜레이가 발생합니다. 즉, 이를 비동기 함수로 다뤄주어야 합니다. getApi 함수를 보시면 axios.get('url')로 api를 호출합니다. 이는 get 방식으로 하겠다는 뜻이며, get 방식에선 url에 query로써 파라미터를 전달해주기 때문에 다른 인자는 크게 필요하지 않습니다. 다만 두번째 postApi는 post 방식이기 때문에 두번째 인자로 보낼 파라미터를 입력합니다. 꼭 하나의 파라미터만 전달할 수 있는 건 아니지만 보통 저렇게 object 형태로 합쳐서 보냅니다.

 두 함수를 보시면 axios 함수의 리턴 값을 response라는 변수에 저장하고 있습니다. axios는 이처럼 api의 응답을 리턴해줍니다. 물론 .then()을 사용하셔도 무방합니다. 이는 axios가 기본적으로 Promise를 반환하기 때문으로 이해하시면 될 것 같습니다.