React- API 연동의 기본

※ 강의를 듣고 제가 이해한 내용을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

API 연동의 기본

API 연동을 하기 위해선 먼저 axios라는 라이브러리를 설치해 주어야 한다.

명령 프롬프트나 터미널 창에서 자신의 프로젝트 디렉터리로 이동한 뒤

아래 설치 명령어를 입력 해주면 된다.

npm add axios

 

REST API를 사용 할 때에는 하고 싶은 작업에 따라 다른 메서드로 요청을 할 수 있는데 메서드들은 다음 의미를 가지고 있다.

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

axios 의 사용법은 아래와 같다.

• GET

import axios from 'axios';

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

데이터를 조회하고 싶을 때에는 get을 써주고 파라미터에 API 주소를 넣어주면 된다.

 

• POST

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

axios.post() 로 데이터를 등록 할 때에는 첫번째 파라미터에는 API 주소를 넣어주고

두번째 파라미터에는 등록하고자 하는 데이터를 객체 형태로 넣어주면 된다.

 

 

API 연습용 사이트

jsonplaceholder.typicode.com/

JSONPlaceholder - Fake online REST API for testing and prototyping

API 연동 실습을 할 때는 이 사이트가 유용하다.

 

사이트에 접속후 스크롤을 내리다 보면 resources에 users링크가 있는데 그 API 주소를 사용할 것이다.

users 링크에 들어간 후 사이트 주소를 복사 붙여넣기 하면 된다.

 

 

users 링크에 들어가보면 이렇게 유저들의 정보들이 있는 것을 볼 수 있다.

 

 

useState 와 useEffect 로 데이터 로딩하기

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

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

1. 요청의 결과

2. 로딩 상태

3. 에러

components/User.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.js

import React from 'react';
import User from './components/users';


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

export default App;

App.js 에서 User 컴포넌트를 불러와 주었다.

 

실행 결과

로딩중이라고 화면에 뜨면서 데이터가 나타나는 것을 볼 수 있다.

 

에러 발생 확인하기

에러가 발생하는것을 확인하기 위하여 주소를 이상하게 바꿔본다. 

User.js 파일의 API주소의 마지막 부분을 아래와 같이 의미없는 문자로 바꾸면 된다.

 const response = await axios.get(
          'https://jsonplaceholder.typicode.com/users/sdfsdf'
        );

 

실행 결과

 

버튼을 눌러서 API 재요청하기

버튼을 눌러서 API를 재요청하는 기능을 구현 하려면 useEffect 내에 만들어준 

fetchUsers 함수를 바깥으로 꺼내주고 버튼을 만들어서 해당 함수를 연결해주면 된다.

 

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

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

    const fetchUsers = async () => { // fetchUsers 함수를 밖으로 꺼내줌
        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);
    }
   
    useEffect(() => {
        fetchUsers(); // useEffect에서는 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>
            <button onClick={fetchUsers}>다시 불러오기</button> {/* 버튼 클릭시 API 재요청 되게 함수 연결 */}
        </>
    );
}

export default User;

 

실행 결과