참고자료
Axios를 사용하여 HTTP요청하기
벨로퍼트와 함께하는 모던 리액트 : API 연동의 기본
나중에 읽고 싶은 자료
Async/Await 마스터 하기

Axios

HTTP 통신에 매우 인기있는 JavaScript 라이브러리. Promise를 기반으로 하여 async/await 문법을 사용하여 요청을 쉽게 할 수 있다. 브라우저와 Node.js 플랫폼에서 모두 사용할 수 있으며 JSON으로 자동으로 변환해주는 기능 덕에 에러가 줄어든다는 장점이 있다.

설치

npm install axios
yarn add axios

Axios API

기본 형태는 아래와 같다.

axios({
  url: 'https://test/api/cafe/list/today',
  method: 'get',
  data: {
    foo: 'diary'
  }
});

아래와 같이 method를 분리해서 사용해도 된다.

• axios.get()
• axios.post()

HTTP 요청에서 사용할 수 있는 다양한 method도 제공한다.

• axios.delete()
• axios.put()
• axios.patch()
• axios.options()

GET request

JavaScript의 async/await 구문을 사용할 수 있다.

import axios from 'axios';

const getBreeds = async () => {
  try {
    return await axios.get(`${URL}/list/all`);
  } catch (error) {
    console.error(error);
  }
};

const countBreeds = async () => {
  const breeds = await getBreeds();
  
  if (breeds.data.message) {
    console.log(`현재 강아지의 수는 ${Object.entries(breeds.data.message).length}입니다.`);
  }
};

countBreeds();

GET 요청에 매개변수 추가

GET 응답에는 URL에 매개변수가 포함될 수 있다.
https://test.com/?foo=bar

axios.get('https://test.com/?foo=bar');

axios를 사용하여 GET 요청 시 간단하게 매개변수를 추가할 수도 있고, params 옵션에서 추가하여 사용할 수도 있다.

axios.get('https://test.com/', {
  params: {
    foo: 'bar'
  }
})

POST 요청

axios.post('https://test.com');

매개변수를 추가하는 방식도 GET과 동일하다.

axios.post('https://test.com/', {
  params: {
    foo: 'bar'
  },
  name: 'blah' // 두번째 파라미터에 등록하고자 하는 정보를 넣을 수 있다.
});

예시 코드

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

function Users() {
  const [users, setUsers] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        // 요청이 시작 할 때에는 error 와 users 를 초기화하고
        setError(null);
        setUsers(null);
        // loading 상태를 true 로 바꿉니다.
        setLoading(true);
        const response = await axios.get(
          'https://jsonplaceholder.typicode.com/users'
        );
        setUsers(response.data); // 데이터는 response.data 안에 들어있습니다.
      } catch (e) {
        setError(e);
      }
      setLoading(false);
    };

    fetchUsers();
  }, []);

  if (loading) return <div>로딩중..</div>;
  if (error) return <div>에러가 발생했습니다</div>;
  if (!users) return null;
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          {user.username} ({user.name})
        </li>
      ))}
    </ul>
  );
}

export default Users;

• useEffect의 첫번째 파라미터로 등록되는 함수에는 async를 사용할 수 없기 때문에 함수 내부에서 async를 사용하는 새로운 함수를 선언한다.