[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 39회차 미션 - 33강 API 소개, API 연동의 기본

API 연동이란?

데이터를 브라우저에서 다른사람들도 볼 수 있도록 구현하려면 API서버를 만들고 이를 연동해서 데이터를 읽고 써야한다. 보통 리덕스라는 라이브러리와, 리덕스 미들웨어로 함께 구현하는 경우가 많다. 그렇지만 리덕스가 필수는 아니기때문에 일단 그냥 컴포넌트에서 API연동할때 어떻게 하는지 알아보고, 좀 더 깔끔한 코드로 다시 작업해보는걸로 진행 하려고 한다.
API연동을 하려면 Promise, async/await에 대해서 잘 알아야 한다. 역시나 까먹었으니 다시 한번 복습할겸 확인하고 넘어가자.

async는 비동기적 처리(asycronous)이다. 비동기적 처리는 흐름이 멈추지 않도록 복잡한 일을 처리하고 있다면 그 시간동안 다른일을 처리하도록 해주는 것이었다. 그래서 setTimeout을 사용한 예제가 있었드랬다. 이런 비동기적 처리를 더 편하게 해주는 것이 Promise였고 와 상세한 설명은 여기를 참고하자. 짱 좋다.

API 연동의 기본

먼저 새로운 리액트 앱을 만들고 디렉토리로 들어가서 axios를 설치해준다.

npx create-react-app api-integrate
cd api-integrate
yarn add axios

axios는 REST API를 요청하게 될때, 이를 propmise기반으로 처리할 수 있게 해주는 라이브러리라고 한다. 클라이언트와 서버가 소통하는 방식이다. HTTP 메서드를 통해서 구분을 한다.

우리가 아까 axios를 다운받았는데 이는 아래와 같이 사용할 수 있다.

import axios from "axios";
axios.get("/users/1"); //조회할때
axios.post("/users", {
  username: "yuyuyu",
  name: "bobobo",
});

이제 API를 통해 연동을 해봐야할 것인데 JSONPlaceholder라는 연습용 API를 통해서 연동해 볼 것이다.

useState와 useEffect로 데이터 로딩하기

우리가 해 볼 것은 아래와 같다.

1. 요청의 결과
2. 로딩 상태
3. 에러
   한번 구현을 시작해보자.

src/User.js

import React, { useEffect, useState } 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 {
        setUsers(null);
        setError(null);
        setLoading(true);
        const response = await axios.get(
          "https://jsonplaceholder.typicode.com/users/"
        );
        setUsers(response.data);
      } catch (e) {
        console.log(e.response.status); //에러코드를 콘솔에 출력하고 싶으면.
        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;

src/App.js

import React from "react";
import Users from "./Users";

function App() {
  return (
    <div>
      <Users />
    </div>
  );
}

export default App;

이렇게 코드를 구현해주고 나면 아래와 같이 잘 구동되는 것을 볼 수 있다.

API를 연동하는 가장 기본적인 방법이다. 다음에는 useReducer를 사용해서 하는 방법을 알아볼 것이다.

오늘은 여기까지..
시청 영상 33강 01~02까지

프론트엔드 개발 올인원 패키지 with React Online. 👉 https://bit.ly/31Cf1hp