お母さんでもわかるReact「State」「useEffect」

State

状態が変更されたときに、Reactは自動的にコンポーネントを再レンダリングするため、状態に応じてイベントを付与することができます。その状態とは下記のようなものです。

・フォームの入力値
・ボタンのクリック回数
・チェックボックスやラジオボタンの選択状態
・ドロップダウンリストの選択状態
・モーダルウィンドウの開閉状態
・タブの選択状態
・APIから取得したデータ
・ユーザーの認証状態
・ページネーションの現在のページ数

難しくなってしまいましたが、「素のVanillaJSのイベント系」と同じようなものと考えてもらって大丈夫かなと思っています。

import { useState } from "react";

export const App = () => {
  const [num, setNum] = useState(0);

  const onClickButton = () => {
    setNum((prev) => prev + 1);
  }
  return (
    <>
      <button onClick={onClickButton}>ボタン</button>
      <p>{num}</p>
    </>
  );
}

上記コードのStateは、「ボタンがクリックされたときに何かを行う」です。

import { useState } from "react"
useStateはReactのフックの一つで、useState関数を用いてStateを扱っていきます。

const [num, setNum] = useState(0)
配列の一つ目にState変数。二つ目にそのStateを更新するための関数を設定します。
つまりnumが状態を持った変数。そして配列の中でsetNumという関数を定義しているというニュアンスになると思います。

setNum(num + 1)ではなく、 setNum((prev) => prev + 1)と記述する。
numを引数で受け取ることでよきせぬ代入を防ぐことができます。ちなみに略さないと次のようになります。setNum(function(prev) { return prev + 1; })

詳しいことは下記の通りです。
引数は「前回の状態」を利用するので、しっかりと値が変わる
↓

//初期値が０の場合

//numに直接代入しているとき
{
setNum(num + 1);//1
setNum(num + 1);//1
}

//引数を利用しているとき
{
setNum((prev) => prev + 1);//1
setNum((prev) => prev + 1);//2
}

※numの中身はundefinedのため、useState(0)で０を初期値としている。
※num,setNum、count,setCountという組み合わせは暗黙の了解 。

（むずかしー）

useEffect

import { useState } from "react";

export const App = () => {
  const [num, setNum] = useState(0);

  //この部分を追加
  useEffect(() => {
    alert();
  }, [num]);

  const onClickButton = () => {
    setNum((prev) => prev + 1);
  }
  return (
    <>
      <button onClick={onClickButton}>ボタン</button>
      <p>{num}</p>
    </>
  );
}

useEffect(() => { alert(); }, [num])
この文で「numが変わった時に、アラートの実行する」という意味になる。
※コンポーネントを表示した一番最初(ようは、returnの中がDOMになるとき)にも発動されるので注意！！
この機能は「画面を表示して初期データを取得するとき」などに使える！

ちなみに、

useEffect(() => {
　　　　//マウント時の実行
  document.body.style.backgroundColor = 'lightblue';
　　　　//アンマウント時の実行
  return () => {
    document.body.style.backgroundColor = '';
  }
}, []);

マウント　　　　 　：DOMになるとき（コンポーネントが表示される時）
アンマウント　：コンポーネントが何らかの処理で消える時

※基本的に直接DOMをいじるような操作はNG!!