react : API 요청하기 (GET)

🌈 npm 설치

npm i axios

 

🌈 API 주소

https://jsonplaceholder.typicode.com/users

 

 

📕 useState 와 useEffect 로 데이터 로딩하기

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

 

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

 

1. 요청의 결과

2. 로딩 상태

3. 에러

 

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 배열을 렌더링 하는 작업을 해주었다.

 

 

📕 확인해봐야 할 작업

const response = await axios.get(
	'https://jsonplaceholder.typicode.com/users/showmeerror' //주소를 이상하게 씀
);

• 주소의 경로가 이상할때 에러 메세지를 띄울 수 있도록 확인해 본다.
• try 문에서 해당 경로를 가져올 수 없게 된다.
• catch 문해서 해당 이벤트를 setError 에 넘겨준다.
• error 에 대한 문구가 뜬다. <div> 에러가 발생하였습니다. </div>

 

 

📒 다시 불러오기 버튼을 만들어 API 재 요청을 해보자.

<div> 
	<button onClick={fetchUsers}> 다시 불러오기</button>
</div>

•  버튼을 클릭할때 onClick 이벤트를 주어 fetchUsers 라는 함수를 호출한다.
• 호출한 함수는 useEffect 에서 실행하게 되고 다시 재 api 요청을 하게 된다.