React 와 API

axios

GET : 데이터 조회

POST : 데이터 등록

PUT : 데이터 수정

DELETE : 데이터 제거

axios 와 위의 요청 메서드들을 사용하여 API 요청을 해줄 수 있다.

import axios from 'axios';

 

axios.get(APIurl);

axios.post(APIurl, 등록하고자하는정보);

axios.put(APIurl);

axios.delete(APIurl);

 

useState 로 요청 상태를 관리하고

-> useEffect 를 사용하여 컴포넌트가 렌더링 되는 시점에 요청하게 작업

 

요청에 대한 상태를 관리할 때 3가지 상태 관리가 필요
1. 요청의 결과
2. 로딩 상태
3. 에러

 

useEffect 자체는 async 를 사용할 수 없으므로 async 로 api를 읽어올 새로운 함수를 생성 해줄 필요가 있다.

 

import axios from 'axios';
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import Loading from './Loading';

const MyLi = styled.li`
  margin: 20px 45px;
`;

const MyContainer = styled.div`
  max-width: 700px;
  margin: auto;
`;

const MyH3 = styled.h3`
  font-size: 2rem;
  font-weight: 700;
  margin: 40px 0 30px 15px;
`;

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

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        setError(null);
        setUsers(null);
        setLoading(true);
        const resData = await axios.get(
          'https://jsonplaceholder.typicode.com/users',
        );

        setUsers(resData.data);
      } catch (err) {
        setError(err);
      }
      setLoading(false);
    };

    fetchUsers();
  }, []);

  if (loading) return <Loading />;
  if (error) return <div>에러 발생</div>;
  if (!users) return <div>유저가 없습니다.</div>;

  return (
    <MyContainer>
      <MyH3>👤 API 를 사용한 유저 리스트</MyH3>
      <ul>
        {users.map((user, idx) => {
          return (
            <MyLi key={user.id}>
              {'(' + (idx + 1) + ')  '} {user.username} ({user.name})
            </MyLi>
          );
        })}
      </ul>
    </MyContainer>
  );
}