#React React에서 Axios 사용법

이번 시간에는 Node.js기반의 Ajax 통신의 꽃 Axios를 배워보겠다

Node.js기반으로 움직이는 것들은 대부분 사용 가능하다고 생각한다

 

1. Axios Install 하기

npm install axios

 

2. Axios Import

App.js에서 아래의 코드를 입력한다

import axios from 'axios'

이러면 총알 일발장전한거에요 이제 사용할 수 있거든요

 

3. 데이터 준비

아래의 링크에서, 간단하게 받아올 데이터를 준비한다

https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

 

링크에 액세스한 뒤, My JSON Server를 클릭

 

그다음 TRY A SERVER클릭

 

 

그다음 선인장이 나오는 화면에서 posts를 클릭한다

 

그러면 이런 간단한 JSON 데이터가 뜨는데, 아래의 URL를 때리면 아래의 json데이터를 받을 수 있다고 보면 된다

 

 

4. 통신하기

axios의 문서를 보면 아래와 같이 되어 있다

axios를 사용한다

.get() : 아마 GET방식을 사용한다는 뜻

.then() : 통신이 성공됐을 시 실행되는 함수

.catch() : 실패했을 시 실행되는 함수

그다음은 모르니 신경안쓰도록 하겠다

 

아래의 URL를 복사한뒤

 

get() 안에다가 붙여 넣기 해준다

 

그다음 실행되는지 확인하기 위하여 then() 함수에 console.log를 찍어보도록 하겠다

axios.get('https://my-json-server.typicode.com/typicode/demo/posts').then(function (response) {
    console.log(response);
});

 

그리고 npm start 해서 Server를 실행한 후, Console를 확인한다

와우~ 간단간단

 

 

5. async와 await

이번에는 async와 await를 사용하는 방식으로 끄적여 보겠다

import axios from 'axios'
import './App.css';

function App() {

  const getData = async () => {
    let response = await axios.get('https://my-json-server.typicode.com/typicode/demo/posts');
    return response.data;
  }

  let res = getData();

  res.then((data) => {
    console.log(data);
  });

  return (
    <div className="App">
    </div>
  );
}

export default App;

 

이렇게 하면, 바로 then()을 쓰지 않고, 내가 원할 때 then()을 사용할 수 있다

나는 결과값이에요~

 

이렇게 간단하게 Axios를 사용해보았다