전체적으로

1) 연습용 API 제공 : jsonplaceholder.typecode.com
2)데이터를 연동해서 읽고 쓸때는 주로 [리덕스]와 [미들웨이]로 구현한다고 한다.
3) promis, async, await 에 대한 선지식이 필요하다
4)

App.js

import React, { Component } from "react";
import Users from "./Users";

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

Users.js

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

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

  useEffect(() => {
    const fetchUser = async () => {
      try {
        setUsers(null);
        setError(null);
        setLoading(true);
        const response = await axios.get(
          "https://jsonplaceholder.typicode.com/users"
        );

        console.log(response);

        setUsers(response.data);
      } catch (e) {
        setError(e);
      }
      setLoading(false);
    };
    fetchUser();
  }, []);

  if (!users) {
    return <p>로딩중...</p>;
  }

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>
          {user.username}---({user.name})
        </li>
      ))}
    </ul>
  );
}

export default Users;