React API値取得-画面表示まで

• 初回レンダリング時などに、useEffectを使ってAPIからデータを取得し画面表示まで。
• 使用するHooks
  1.useEffect: コンポーネントのマウント時に処理を実行
  2.useState: APIレスポンスやローディング状態、エラーなどの状態管理

App.tsx

import { useEffect, useState } from "react";
import "./App.css";

function App() {
  const [data, setData] = useState(null); // APIレスポンスの保存
  const [isLoading, setIsLoading] = useState(true); // 読み込み状態
  const [error, setError] = useState(null); // エラー情報の保存

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch("APIエンドポイント"); // Api取得
        const json = await response.json(); //レスポンスをjsonに変換
        setData(json);
        setIsLoading(false); // 読み込み完了
      } catch (e) {
        setError(e); // エラー時はエラー状態にセット
      } 
    };
    fetchData();
  }, []); // []で初回マウント時のみ実行。[]の場合、確認対象がないので再実行されない

  if (isLoading) {
    return <p>読み込み中...</p>;
  }

  if (error) {
    return <p>エラーが発生しました: {error.message}</p>;
  }

  return (
    <div>
      <p>{data.name}</p> //取得したApiのデータを表示。
      <p>{data.email}</p>
    </div>
  );
}

export default App;