[React] Axios로 API 호출하기 간단 예제

---

Reactjs로 프론트 페이지 개발 중 Axios로 API를 호출하는 가장 기본적인 방법에 대해 알아봅시다.

 

Axios는 공식 Docs에 의하면, 브라우저와 Node.js를 위한 Pormise 기반 HTTP 클라이언트 입니다.

편하게, Ajax와 함께 프론트와 백엔드 사이의 통신을 편하게 연결해주는 라이브러리라고 보시면 되겠습니다.

 

사용 방법은 생각보다 더 간단합니다.

 

우선 설치!

 

npm install axios

yarn add axios

 

설치 완료!

 

간단한 예제를 통해서 API를 호출해서 데이터를 화면에 띄워보도록 합시다.

 

무료로 가상의 API를 제공해주는 Jsonplaceholder를 사용해서 API를 호출해볼 것입니다. 

Jsonplaceholder에서 제공하는 API 중 Comments의 첫번째 내용을 출력해보겠습니다.

 

import React, {useState} from 'react';
import axios from 'axios';

const App = ()=>{
  const [data, setData] = useState(null);
  const onClick = ()=>{
    axios.get('https://jsonplaceholder.typicode.com/comments/1').then(reponse => {
      setData(reponse.data);
    });
  }
  return (
    <div>
      <div>
        <h3>Axios 테스트해보기</h3>
        <button onClick={onClick}>불러오기</button>
      </div>
      {data && 
        <div>
          <br />
          번호 : {data.postId} <br />
          Email : {data.email} <br />
          Body : {data.body} <br />
        </div>
      }
    </div>
  );
}

export default App;

 

 

작성한 예제를 직접 실행해보면 다음과 같은 불러오기 버튼이 뜹니다. 클릭해서 확인해봅시다.

 

 

 

원본으로 제공되는 API는 아래 같이 구성되어 있지만, 우리는 필요한 요소를 가지고 순서를 조금 변경해서 원하는 내용을 GET 요청으로 띄워볼 수 있습니다.

 

이 API 자료를 받아서 우리는, postId를 번호로, Email과 Body를 각각 호출해서 데이터를 띄운 것!.

 

 

간단한 예제에는 별다른 CSS 적용이 없었지만 Axios를 활용하여 API 요청을 받아오는 방법만 이해한다면, 원하는대로 화면을 구성해서 정보를 띄워볼 수 있을 것입니다.