前提

ランダムな犬の画像が表示されるアプリに、useEffectを使用して初回表示時にDog APIから犬種一覧を取得してみた時の備忘録。
初心者なので間違えてることがあったらお手柔らかにご指摘お願いいたします！！

useEffectって何がいいの？

useEffectを利用することでコンポーネントの内容を表示する際に外部のサーバからAPIを経由してデータを取得することやコンポーネントが更新する度に別の処理を実行するということが可能になります。またuseEffectは一つのコンポーネントに複数記述することも可能です。

こちらより引用

実際に使ってみる

まずは今回useEffectを使うDogListContainerコンポーネントをAppコンポーネントに読み出し

App.js

import React from 'react';
import './App.css';
import { Header } from './Header';
import { Description } from './Description';
import { DogListContainer } from './DogListContainer';

export const App = () => {
  return (
    <div className='App'>
      <body>
        <Header />
        <Description />
        <DogListContainer />
      </body>
    </div>
  );
}

export default App;

犬種一覧データを保持するために、useStateでbreedsとsetBreedsを定義する。

DogListContainer.js

export function DogListContainer() {
  const [breeds, setBreeds] = useState([]);

※breedsは犬種

useEffectとFetch関数を使って犬種一覧を取得し、用意したstateに格納する

APIのレスポンスから、犬種リストの配列を生成して、breedsに格納する。

DogListContainer.js

  useEffect(() => {
    fetch('https://dog.ceo/api/breeds/list/all')
      .then(response => response.json())
      .then(data => {
        const list = data.message
        setBreeds(Object.keys(list))
      })
  }, []);

Object.keys()メソッドは、指定されたオブジェクトが持つプロパティの名前の配列を返す。

外部のサーバのやりとりにuseEffectを利用する場合は第2引数に空配列[]をつける。
でないとコンポーネントの更新のたびにサーバーにアクセスすることになる。

コード全体

DogListContainer.js

import React, { useState, useEffect } from 'react';

export function DogListContainer() {
  const [breeds, setBreeds] = useState([]);

  useEffect(() => {
    fetch('https://dog.ceo/api/breeds/list/all')
      .then(response => response.json())
      .then(data => {
        const list = data.message
        setBreeds(Object.keys(list))
      })
  }, []);

    return (
        <select name="breed" >
            {breeds.map(breed => (
                <option key={breed} value={breed}>{breed}</option>
            ))}
        </select>
    );
}