【React】API呼び出しの【4step】

はじめに【自己紹介】

・Reactを学習して1カ月ほどの未経験者です。

・API呼び出しの際に最初の段階で躓いてしまったため、自身が腑に落ちた考え方をアウトプットします。

・同じ未経験の方々との共有、先輩エンジニアさんたちからの厳しいご指摘をお待ちしております。

0.お題【ユーザーリスト】の表示

※今回は架空のAPIからユーザーネームを取得、そのデータをリスト形式で表示するReactコポーネントを作成します。

const UserList = () =>{
  const [users, setUsers] = useState([]);

・データの取得前にあらかじめユーザーリストを保存する準備をします。

1.API呼び出しの【4step】

【step1】データの取得(getUsers関数)

const getUsers = () => {
  fetch(url)

・fetch(url) は指定した 'url' からデータを取得するリクエストを送信。(urlはAPIエンドポイント)
※APIエンドポイントとは特定の機能やリソースにアクセスするための URL またはパスのこと

【srep2】データの変換、保存

.then((res) => {
    return.res.json();
})
.then((users) => {
    setUsers(users);
});

①.then((res) => {return.res.json();}) でサーバーからの応答(response、略して【res】)を受け取りデータをJSON形式に変換
②.then((users) => {setUsers(users);}) で変換されたJSONデータ(users)をReactの状態の(users)に保存

【step3】データの表示

return (
  <div>
    <h1>User List</h1>
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  </div>
);

・取得したユーザーデータを表示するためのHTMLを返しています。
(users)配列内のアイテムを【li】として表示し(user.id)をkeyとして(user.name)を表示する

【step4】useEffectでgetUsers関数実行

useEffect(() => {
    getUsers();
},[]);

・ 'useEffect' フックを使用しコンポーネントがマウントされた時に 'getUser' 関数を実行します。'useEffect' の第二引数に空の配列 '[]' を渡すことで、依存関係がないため、コポーネントが最初にレンダリングされた時1回だけ 'getUsers' 関数が実行されることになります。

まとめ

start0. 'useState' フックを使用してデータの保存準備

step1. 'fetch' 関数を使用してAPIからデータを取得

step2.取得したデータをJSON形式に変換、Reactの状態に保存

step3.保存したデータを表示するためのコポーネントを作成

step4. 'useEffect' フックを使用してコポーネントマウント時にデータ取得関数を実行

API呼び出しを上記【4step】で考えたらシンプルで頭に入りました。実際に天気をAPIで呼び出す制作をしましたがここに仕様を肉付けしていくという感想でした。

・また、【'async' 'await' 'try' 'catch'】を使用しコードの読みやすさ、エラーハンドリングを行えるようになればより保守性の高いコードを書けるため今後勉強をしていきます。(現在インプット中)