ReactでLoading画面の実装（備忘録）

下記の記事を参考にローディング画面の実装をしたので、
処理の流れを備忘録で記録します。
※詳細は下記の記事をご参考ください。

流れ

■用意するもの
　・バックエンドを呼び出す処理
　・Loading画面

・isLoadingのstateはデフォルトではfalse。

  const [isLoading, setIsLoading] = useState(false);

isLoadingのstateがTRUEの時、Loading画面を呼び出す。

{isLoading && <Loading />}
<button onClick={requestBackend}>バックエンドにリクエスト</button>

・requestBackend処理を呼び出す。
・isLoadingのstateをtrueにセットしてLoading画面を表示する。
・axiosでバックエンドにリクエストを送る。
・thenとcatch処理の二つにisLoadingのstateをfalseにセットしてLoading画面を非表示にする。

  const requestBackend = (event) => {
    event.preventDefault();
    setIsLoading(true);  

    // axiosを使ってバックエンドへリクエスト
    fetchHogeHoge()
      .then((data) => {
        setHogeHoge(data.hogehoges)
        setIsLoading(false)
      }).catch((error) => {
        console.log(error);
        setIsLoading(false);
      })
   }

その他参考文献：

参考：Loading画面のアニメーション

参考：全画面オーバレイのcss