■ 概要

ブラウザ更新時に学習データがリセットされる問題を解決するため、LocalStorageを用いてデータを保存・復元する処理を実装した。

■ 問題点（修正前）

・ブラウザ更新（F5）するとデータが消える
・stateはメモリ上にしか存在しないため

■ 解決方法

state → LocalStorageに保存
↓
ページ読み込み時に復元

■ useEffectとは（超重要）

「特定のタイミングで処理を実行するフック」

■ 基本構文

useEffect(() => {
  // 実行したい処理
}, [依存配列]);

■ 動き方

■ 実装① 初回ロード時（復元）