[React] 리액트에서 axios 사용하기

 

애플리케이션을 만들때 , 서버의 API를 호출하여 사용하는 경우 네트워크 송수신 과정에서 시간이 걸린다.

 

따라서 응답을 받을 때까지 기다렸다가 전달 받아서 처리한다. 이때 만약 동기적으로 처리한다면 ?

요청이 끝날때 까지 다른 일을 할 수 없기때문에 효율적이지 않을것이다.

 

따라서  이과정을 비동기적으로 처리하게 된다!

 

 

Q. 비동기에 대해 더 자세히 알고 싶다면? 

https://mandelina-code.tistory.com/67

[JS] Promise (feat. 동기,비동기가 뭘까?)

 

 

 

---

 

 

그러면 axios는 무엇일까?

axios는 현재 가장 많이 사용되는 JS HTTP 클라이언트이다.

axios에 대해 자세히 알아보자! 

 

 

 

---

 

axios 

- axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트이다.

 

- axios는 return을 promise 객체(json형식)으로 해주기 때문에 response 데이터를 다루기 쉽다.

 

- npm을 사용한 설치 명령어는 다음과 같다.

 

npm install axios

 

 

---

 

axios  사용하기

 

1. axios에서 GET 요청을 수행해보자! 

 

[ 예제 - GET 요청 1 ]

 

import React from "react";
import axios from "axios";  // 1
import { useEffect } from "react";

export default function Product() {
  useEffect(() => {    //2
    axios 
      .get("http://test.api.weniv.co.kr/mall")  //3
      .then((res) => {   //4
        console.log("axios");
        console.log(res);
        console.log(res.data);
      })
    },[]);

 

1. axios를 사용하기 위해 import 해준다.

 

2. useEffect를 사용하고, 의존성 배열에 빈배열을 추가해 주었다. (빈배열 사용시 mount, unmount 시에 한번만 실행된다.)

 

3. axios를 사용하여 get요청을 수행한다. url 주소로부터  제공하는 API를 호출하고, 이에 대한 응답을 볼 것이다.

 

4. resolve된 후 then을 순차적으로 실행한다. 각 res값과 res.data값을 보면 다음과 같다.

 

res 값

res.data값

 

이렇듯 fetch와 비교했을때 자동으로 JSON 데이터 형식으로 변환되어 fetch에서 .json() 메서드를 썻던 번거로움을 덜 수 있다. 

 

 

[ 예제 - GET 요청 2 ]

axios.get('/user?ID=12345')
  .then(function (response) {
    // 성공 핸들링
    console.log(response);
  })
  .catch(function (error) {
    // 에러 핸들링
    console.log(error);
  })
  .then(function () {
    // 항상 실행되는 영역
  });
  
  
// async/await 사용
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

 

ID 가 12345인 user정보를 가져오는 예제이다.

async / await를 사용할 경우 함수 외부에 async 키워드를 추가하면 된다.

 

 

---

 

2. axios에서 post요청을 수행

 

[ 예제 - GET 요청 1 ]

axios.post("http://test.api.weniv.co.kr/mall", {
      id: 50,
      productName: "코딩하는 아랑이",
      price: 10000,
      stockCount: "10"
      thumbnailImg: url
      viewCount : "1"
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

 

 

get요청과 비슷하게 post요청을 통해 서버의 data를 등록하는 예제이다. 

 

 

---

 

 

그밖에 axios 자주 사용하는 단축 메소드는 다음과 같다. 

 

GET : axios.get(url[, config])
POST : axios.post(url, data[, config])
PUT : axios.put(url, data[, config])
DELETE : axios.delete(url[, config])

 

 

 

 

axios  vs  fetch

 

axios	fetch
라이브러리 설치가 필요하다.	현대 브라우저에 빌트인이라 설치가 필요 없다.
요청 객체에 url이 있다.	요청 객체에 url이 없다.
data속성을 사용한다.	body속성을 사용한다.
data는 object를 포함한다.	body는 문자열화 되어있다.
자동으로 JSON형식으로 변환된다.	.json()  메서드를 사용해야 한다.
XSRF를 보호해준다.	별도로 보호해주지 않는다.
status가 200이고 statusText가 'ok' 이면 성공이다.	응답객체가 ok속성을 포함하면 성공이다.
요청을 취소하거나 타임아웃을 걸 수 있다.	기본적으로 제공하지 않는다.
조금 더 많은 브라우저에 지원된다.	제한이 있다.
download 진행에 대해 기본적인 지원을 한다.	지원하지 않는다.

 

 

axios는 fetch에 비해 많은 기능 지원과 문법이 간소화 되는 장점이 있다.

하지만 별도의 설치가 필요하긴 하다.

실무에서는 axios를 더 많이 사용한다고 한다.

 

 

 

 

끝으로 

 

- Axios를 사용하려면 Promise API가 지원되어야 한다.

 

- 지원되지 않으면 polyfill을 사용할 수 있다.