React API 연동

김효인·2021년 6월 10일
0
post-thumbnail

API가 필요한 이유

react는 front-end에서 사용하기 때문에 데이터를 모두가 사용할 수 있게 저장할 수 없다는것을 의미하고, 이는 다른 사용자와의 데이터 공유가 이뤄질 수 없음을 의미합니다.

yarn add axios

axios는 REST API에 데이터를 요청할 때 이를 promise로 처리할 수 있게 해주는 라이브러리

Rest API

HTTP method를 통해 서버와 클라이언트의 통신을 할 경우에 사용해서 상대가 어떤 통신을 요청하는지, 그리고 내가 어떤 통신을 요청해야 하는지 정할 수 있습니다.
axios를 사용해서 GET,PUT,POST,DELETE 등의 메서드로 API 요청을 할수 있습니다.

GET : 데이터 조회
POST : 데이터 등록
PUT : 데이터 수정
DELETE : 데이터 제거

import axios from 'axios';

axios.get('/users/1');

이 경우는 users들 중에 첫번째 user에 대한 정보를 불러와달라는 것을 의미합니다. 물론 첫번째가 아니라 id가 1인 유저가 될 수도 있고 그건 서버가 정해놓은 규칙이라 상황에 따라 다릅니다.

get이 위치한 자리에는 메서드 이름을 소문자로 넣습니다. 예를 들어 새로운 데이터를 등록하고 싶다면 axios.post() 를 사용하면 됩니다.

그리고 파라미터에는 API주소를 넣습니다.

axios.post()로 데이터를 등록할때에는 두번째 파라미터에 등록하고자 하는 정보를 넣을 수 있습니다.

axios.post('/users', {
  username: 'blabla',
  name: 'blabla'
});

useState 와 useEffect 로 데이터 로딩하기

useState 를 사용하여 요청 상태를 관리하고, useEffect 를 사용하여 컴포넌트가 렌더링되는 시점에 요청을 시작하는 작업을 해보겠습니다.

요청에 대한 상태를 관리 할 때에는 다음과 같이 총 3가지 상태를 관리해주어야합니다.

  1. 요청의 결과
  2. 로딩 상태
  3. 에러

Users.js

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 를 사용하는 새로운 함수를 선언해주어야 합니다.

로딩 상태가 활성화 됐을 땐 로딩중.. 이라는 문구를 보여줬습니다.

그리고, users 값이 아직 없을 때에는 null 을 보여주도록 처리했습니다.

맨 마지막에서는 users 배열을 렌더링하는 작업을 해주었습니다.

이제 이 컴포넌트가 잘 작동하는지 확인해봅시다. App 컴포넌트에서 User 컴포넌트를 렌더링해보세요.

App.js

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

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

export default App;
profile
내가 보려고 만든 velog

0개의 댓글