[React] React에서 Axios 사용해 API 호출하기

Axios란?

서버와 데이터를 주고받기 위해서는 HTTP 통신을 해야 하는데,

React에는 HTTP Client(HTTP 상에서 커뮤니케이션을 하는 자바 기반 컴포넌트) 내장 클래스가 존재하지 않는다.

 

따라서 React에서 *AJAX(Asynchronous Javascript And XML)를 구현하려면

JavaScript 내장객체인 XMLRequest를 사용하거나, 다른 HTTP Client를 사용해야 한다.

 

* AJAX : 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것으로,

  JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 비동기로 주고받을 수 있다.

 

HTTP Client 라이브러리에는 Fetch API, Axios가 있는데, 사용하는 형태에 약간 차이가 있다.

 

• cf. Fetch API (window.fetch)

  const url ='<http://localhost3000/test`>
  const option ={
     method:'POST',
     header:{
       'Accept':'application/json',
       'Content-Type':'application/json';charset=UTP-8'
    },
    body:JSON.stringify({ // body 부분에 stringify()
    	name:'name',
      	age:20
    })
  
    fetch(url, options) // url이 인자로 들어감
    	.then(response => console.log(response))

---

React에서 Axios 구현하기

1. Axios 설치

 

npm install axios
yarn add axios

 

2. Axios 사용하기

 

프론트에서는 아래의 두 가지 처리를 해 주면 된다.

1) 비동기로 서버에 요청 -> 2) 서버의 응답이 오면 받아서 성공/실패 시를 구분해서 처리

 

서버에 요청 후 응답이 오기까지 시간이 걸리기 때문에 요청은 비동기 처리하고,

응답을 처리하는 부분은 then이나 await을 사용한다.

 

- 요청 예제

요청 예제는 Axios 공식 페이지에서 가져왔다.

 

// GET
async function getUser() { // async, await을 사용하는 경우
  try {
      // GET 요청은 params에 실어 보냄
    const response = await axios.get('/user', {
        params: {
            ID: 12345
        }
    });
    
    // 응답 결과(response)를 변수에 저장하거나.. 등 필요한 처리를 해 주면 된다.
    
    await axios.get('/user?ID=12345'); // 위의 요청과 동일
    
    var userId = 12345;
    await axios.get(`/user?ID=${userId}`); // Backtick(`)을 이용해 이렇게 요청할 수도 있다.
    
    console.log(response);
  } catch (e) {
    // 실패 시 처리
    console.error(e);
  }
}

// POST
async function postUser() {
  try {
  // POST 요청은 body에 실어 보냄
    await axios.post('/user', {
        firstName: 'Fred',
        lastName: 'Flintstone'
    });
  } catch (e) {
    console.error(e);
  }
}

 

// 동시 요청 생성하기
function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

Promise.all([getUserAccount(), getUserPermissions()]) // Promise, then 사용
  .then(function (results) { // 응답 결과를 results 배열로 받아서
    const acct = results[0]; // 각각의 결과를 acct와 perm에 저장
    const perm = results[1];
  });

 

 

---

참고한 글

• https://axios-http.com/kr/docs/intro

시작하기 | Axios Docs

• https://yamoo9.github.io/axios/guide/

Axios | Axios 러닝 가이드

• https://velog.io/@shin6403/React-axios%EB%9E%80-feat.-Fetch-API

React | axios란? (feat. Fetch API)

• https://velog.io/@devstone/React%EC%97%90%EC%84%9C-Axios%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%B4-API-%ED%98%B8%EC%B6%9C%ED%95%98%EA%B8%B0-feat.-fetch-ajax

React에서 Axios를 이용해 API 호출하기 (feat. fetch, ajax)