React.js | API 연동 | 기본

API 연동의 기본

 

API 연동을 하기 위해 우선 프로젝트를 새로 만들어주자.

$ npx create-react-app react-api

 

그리고 API를 호출하기 위해 axios 라는 라이브러리를 설치한다.

$ npm i axios

 

API의 사용법은 다음과 같다.

import axios from 'axios';

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

 

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

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

 

useState 와 useEffect 로 데이터 로딩하기

 

컴포넌트가 랜더링되는 시점에 요청을 시작하는 작업을 해보자.

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

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

 

src 컴포넌트에 Users.js를 생성하고 다음 코드를 작성해보자.

 

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;

 

사용자들이 담길 users와 loading상태 여부를 체크할 loading이랑, error 를 출력해주는 error를 선언한다.

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

 

그다음 주석대로 error와 users를 초기화하고 loading을 true로 만들어준 다음, 데이터가 정상적으로 수신되면 loading을 false로 바꿔준다. catch부분에 error를 담아준다.

  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();
  }, []);

 

 

컴포넌트가 잘 작동하는지 확인하기 위해 App 컴포넌트에 User 컴포넌트를 추가하자.

 

 App.js

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

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

export default App;

 

이제 주소로 들어가보면

 

 

 

로딩중인지, 에러가 발생했는지, user가 존재하지 않은지에 대해 조건문을 설정해준다.

  if (loading) return <div>로딩중..</div>;
  if (error) return <div>에러가 발생했습니다</div>;
  if (!users) return null;

 

 

에러 발생까지 확인해준다. 주소를 이상하게 바꿔준다.

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

 

확인해보면

 

 

이번엔 버튼을 눌러서  API를 재요청하는 코드를 구현해보자.

 

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);

  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);
  };

  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>
    </>
  );
}

export default Users;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

참조

https://react.vlpt.us/integrate-api/01-basic.html

1. API 연동의 기본 · GitBook