HTTP 비동기 통신 라이브러리인 axios는 promise기반으로, JSON을 자동으로 변환해주어 더 읽기 쉬운 aynchronous code와 함께 javascript의 async, await를 사용할 수 있도록 해준다.
axios는 npm command를 이용하여 설치한 후 axios를 사용할 파일 안에서 import해주어 사용할 수 있다.
axios를 사용하여 리액트 application에서 JSON Placeholder API(https://jsonplaceholder.typicode.com/users)에 접근해보자.

GET Request using axios

서버에 GET방식으로 요청 -> 서버에서 어떤 data를 가져와서 보여줄 때 사용(서버의 어떤 값, 내용 등을 바꾸지 않음 like 게시판에서 글의 목록, 내용을 보여주는 경우)
GET은 CRUD로직중 Read의 속성을 가진 http메소드(PUT: Update)

import React from "react";
import { useState, useEffect } from "react";
import axios from "axios";

const App = () => {
  const [persons, setPersons] = useState([]);

  useEffect(() => {
    // GET request 수행
    axios.get(`https://jsonplaceholder.typicode.com/users`).then((res) => {
      const personData = res.data;
      setPersons(personData);
    });
  }, []);

  return <ul>{persons && persons.map((person) => <li>{person.name}</li>)}</ul>;
};
export default App;

response object를 return하는 프로미스를 가져오기 위해 url과 함께 axios.get(url)을 사용
status code(under res.status)와 같은 request에 대한 다른 정보들도 가져올 수 있다.(more information inside of res.request)

POST Request using axios

서버에 POST방식으로 요청 -> 서버의 값, 내용을 바꾸기 위해 사용 like 게시판에 글을 작성 시 글의 내용이 데이터베이스에 저장됨
CRUD로직중 Create의 속성을 가진 http메소드
POST라고 불리는 또 다른 HTTP request method와 함께 aixos를 사용해보자.

import React from "react";
import axios from "axios";
import { useState } from "react";
const App = () => {
  const [state, setState] = useState({ name: "" });

  const handleChange = (event) => {
    setState({ name: event.target.value });
  };

  const handleSubmit = (event) => {
    event.preventDefault();

    const user = {
      name: state.name,
    };
    axios
      .post(`https://jsonplaceholder.typicode.com/users`, { user })
      .then((res) => {
        // 확인해보기!!!!!
        console.log(res);
        // "aejijeon"입력 -> Add 시
        // {user: {name: "aejijeon"}, id: 11} 출력

        console.log(res.data);
      });
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label>
          Person Name:
          <input type="text" name="name" onChange={handleChange} />
        </label>
        <button type="submit">Add</button>
      </form>
    </div>
  );
};
export default App;

user input을 포착한 후에 해당 input을 POST request와 함께 axios의 인자로 전달해 주어 API의 content에 POSTs를 가능하게 해준다.
POST를 사용하면 then call 내부에서 사용할 수 있는 정보를 가진 response object(shows the user input in the form)를 가져다 준다.

DELETE Request using axios

CRUD로직중 Delete의 속성을 가진 http메소드
axios.delete를 사용하고 url을 파라미터로 전달해서 API로부터 item들을 제거해보자.

import React from "react";
import axios from "axios";
import { useState } from "react";

const App = () => {
  const [state, setState] = useState({
    id: "",
  });

  const handleChange = (event) => {
    setState({ id: event.target.value });
  };

  const handleSubmit = (event) => {
    event.preventDefault();

    axios
      .delete(`https://jsonplaceholder.typicode.com/users/${state.id}`)
      .then((res) => {
        console.log(res);
        console.log(res.data);
      });
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label>
          Person ID:
          <input type="text" name="id" onChange={handleChange} />
        </label>
        <button type="submit">Delete</button>
      </form>
    </div>
  );
};
export default App;

base instance in Axios

url을 정의하고 다른 configuration elements를 정의할 수 있는 base instance 설정하기

// src/api.js
import axios from "axios";
export default axios.create({
  baseURL: `http://jsonplaceholder.typicode.com/`,
});

default instance가 위와 같이 설정되면, 다른 컴포넌트 안에서 instance를 사용할 수 있게 됨.

import React from "react";
import axios from "axios";
import API from "../api";

const App = () => {
  const handleSubmit = (event) => {
    event.preventDefault();

    API.delete(`users/${this.state.id}`).then((res) => {
      console.log(res);
      console.log(res.data);
    });
  };
};

현재 http://jsonplaceholder.typicode.com/이 base url이기 때문에 API에 있는 다른 endpoint를 다루고자 할 때 전체 url을 입력 할 필요가 없게 된다.

async, await 사용(to work with promises)

“await”는 promise를 resolve하고 value를 반환하기 때문에 return된 value는 변수에 할당될 수 있다.

const handleSubmit = async (event) => {
  event.preventDefault();

  //
  const response = await API.delete(`users/${this.state.id}`);

  console.log(response);
  console.log(response.data);
};

async, await를 사용하게 되면 .then을 사용하지 않고 return된 value값을 다룰 수 있게 된다.
(promise가 resolve된 후 value가 response variable에 저장됨)

references

“Digital Ocean Community”, 2021년 03월 28일 접속, https://www.digitalocean.com/community/tutorials/react-axios-react