前回のReact初学者のUdemy講座受講メモ（Reactとは編）の続きです。
イベントリスナ、useStateとは編です。

イベントリスナとは

要素をクリック・切り替えなどの操作をした際に実行する関数

// イベントリスナ
const clickHendler = () => {
    alert("ボタンがクリックされました");
};
// クリック時にclickHendlerを呼ぶ
<button onClick={clickHendler}>クリックしてね</button>

注意点

onClick、onChangeのようにキャメルケースで書く！
onclick、onchangeはHTMLの属性となってしまう
onClick={clickHendler()} のように関数の実行結果を入れるのは違う

その他イベントタイプ

onChange：input要素に入力、変更があったとき発火、コールバック関数の引数から入力値を取得できる
onBlur：input要素からフォーカスを失うと発火
onFocus：input要素にフォーカスすると発火

イベントに合わせて画面表示を更新する

input要素の変更に応じて表示値をリアルタイムに変更する

下のような感じで動きそう、実行結果を変数(dispVal)に格納して表示する、みたいな

const Example = () => {
  const clickHendler = (e) => {
    return e.target.value;
  };
  let dispVal;
  return (
    <>
      <input type="text" onChange={(dispVal = clickHendler)} /> = {dispVal}
    </>
  );
};

でもこれではうごかない；；

→useState()を使うと動く！！！

下のような感じに書く

import { useState } from "react";
const Example = () => {
  let [val, valFunc] = useState();
  const clickHendler = (e) => valFunc(e.target.value);
  return (
    <>
      <input type="text" onChange={clickHendler} /> = {val}
    </>
  );
};

動かなかった理由
onChange={(dispVal = clickHendler)}←ここしか再実行されないから
コンポーネント自体を再実行する必要がある。
ここで、再実行したら変数毎回初期化されん？？と思ったのですが、ここら辺はuseStateがうまいことやってくれるみたいです

useStateとは

コンポーネントの再実行をお願いする
値を初期化せず保持し続ける
const [val, setVal] = useState();
valには保持している値、setValには値を更新する関数が代入される。
イメージ的にはコンポーネントをスコープとした変数(val)とその変数のsetter(setVal)を提供してくれる人、見たいに捉えました。

useStateの注意点

コンポーネントごとに独立して管理される
コンポーネントの最上位の階層で呼ぶ必要がある（if文、for文などのブロック内で呼ぶとダメ）
セットする関数はすぐ実行されない、予約される（要確認）
前回のstate値を参照する場合は、更新用関数に関数を渡す（要確認）
オブジェクト型を扱う時の注意点
セットする時、オブジェクトのまま渡す際、更新時も同じ形式で渡す。また、更新時は新しいオブジェクトを渡す必要がある
スプレッド演算子とカンマで特定の要素だけ新しくしたオブジェクトとなる

  const orderObj = { item: "apple", count: 10 };
  const [order, setOrder] = useState(orderObj);
  const changeItem = (e) => {
    setOrder({ ...order, item: 'orange' });
  };

次回

制御構文とフォームの制御（未）