[ React.js ] Axios 사용하는 방법

안녕하세요 상훈입니다.

리액트에서 Axios 요청을 사용하는 방법(chart ... etc)을 알아보도록 하겠습니다.

$ npm install axios react-chartjs-2 --save

터미널에 복사 붙여넣기 해주시면 됩니다.

 

Axios는 js의 Ajax와 유사합니다.

브라우저와 Node.js에서 Promise API를 통신 방식으로서,

 프론트와 백을 연결하여 HTTP 비동기 통신 방식입니다.

 

받아오는 방식은 JSON 입니다.

이 중에 GET 방식을 진행해볼건데, 

axios.get(url)

로 사용이 가능합니다. 

 

---

예제) 코로나 현황 검색

우리나라의 covid19 현황을 검색해보겠습니다.

저는 Google Extensions : Talend API Tester를 사용했구요, api 통신 테스터 아무거나 사용하셔도 무방합니다.

api 테스트 send 작업 - 우리나라 코로나 현황

결과값

이렇게 JSON 형태로 값이 받아와졌습니다. 

이제 web에 적용을 하도록 하겠습니다.

Contents.js    :  React.js file

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


const Contents = () => {

    useEffect(() => {
        const fetchEvents = async () => {
            const res = await axios.get("https://api.covid19api.com/total/dayone/country/kr")
            console.log(res)
        }
        fetchEvents()
    })

    return (
        <section>
            <h2>국내 코로나 현황</h2>
            <div className="contents">
            

            </div>
        </section>
    )
}

export default Contents

 

1. useState와 useEffect를 import 해주셔서 앱이 로딩이 될 때 사용을 하도록 하고,

2. axios를 import하여 axios를 사용할 수 있게 해줍니다.

3. 그리고 async await을 사용하여 바로 스크립트가 실행되는 것이 아닌, 먼저 모든 페이지가 로딩 된 후에 데이터를 찾는 것으로 설정하였습니다.

 

console창 확인

 

이렇게 object 형태로 데이터를 받아왔습니다.