Reactクライアント側からリクエストを送ってデータ取得（axios, SWR）

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "[email protected]",
		/* 省略 */
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "[email protected]",
		/* 省略 */
  },
・・・

yarn add axios
or
npm install axios

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

export const UsersAxios = () => {
  const [userData, setUserData] = useState(null);
  const [error, setError] = useState('');

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then((res) => {
        setUserData(res.data);
      })
      .catch((err) => setError(err.message));
  }, [])

  return (
    <>
      <h3>axios で取得</h3>
      {error ? <div style={{ color: 'red' }}>{error}</div> : ''}
      {userData ? userData.map(data => <div key={data.id}>{data.name}</div>) : ''}
    </>
  );
}

yarn add swr
or 
npm install swr

import useSWR from "swr";

export const UsersSWR = () => {  
  const fetcher = (url) => fetch(url).then(res => res.json())
  const { data, error } = useSWR("https://jsonplaceholder.typicode.com/users", fetcher)
  
  if (error) return <div>ロード失敗</div>
  if (!data) return <div>ロード中...</div>

  return (
    <>
      <h3>SWR で取得</h3>
      {error ? <div style={{ color: 'red' }}>{ error }</div> : ''}
      {data ? data.map(data => <div key={data.id}>{data.name}</div>) : ''}
    </>
  ); 
}