18.3.1.4 웹 요청 비동기 작업 처리하기

이번에는 thunk의 속성을 활용하여 웹 요청 비동기 작업을 처리하는 방법에 대해 알아보겠습니다. 웹 요청을 연습하기 위해 JSONPlaceholder(https://jsonplaceholder.typicode.com)에서 제공되는 가짜 API를 사용하겠습니다. 사용할 API는 다음과 같습니다.

# 포스트 읽기(:id는 1~100 사이 숫자)
GET https://jsonplaceholder.typicode.com/posts/:id

# 모든 사용자 정보 불러오기
GET https://jsonplaceholder.typicode.com/users

API를 호출할 때는 주로 Promise 기반 웹 클라이언트인 axios를 사용합니다. 해당 라이브러리를 설치해 주세요.

$ yarn add axios

API를 모두 함수화해 주겠습니다. 각 API를 호출하는 함수를 따로 작성하면, 나중에 사용할 때 가독성도 좋고 유지 보수도 쉬워집니다. 다른 파일에서 불러와 사용할 수 있도록 export를 사용하여 내보내 주세요.

lib/api.js

import axios from 'axios';

export const getPost = id =>
  axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`);

export const getUsers = id =>
  axios.get(`https://jsonplaceholder.typicode.com/users`);

---