Reactのチュートリアルを学ぶ（1）

みなさんお疲れ様です。
heeheeと申します。
唐突ですが、備忘録としてreactチュートリアルを残していこうと思いました。
今回はReactの基礎中の基礎であるstateについて記していきます。
間違っている部分がありましたら、コメント等でご教示いただけると幸いです。

useState()

Reactを使う上で一番最初に学ぶのがuseStateです。
useStateは各コンポーネントが保持する状態を表します。
使い方

const [value, setValue] = useState("");

useState()の詳細は以下です。
ー引数
・（初回レンダリング時の）状態の初期値
ー戻り値
要素0: 現在の状態
要素1: 状態の値を変更するための関数

慣習として、戻り値は以下のような名称にするのが一般的です。

const [xxx, setXxx] = useState("");

useStateの使用例

// Example.jsx
const Example = () => {
  const [input, setInput] = useState("");
  const handleChange = (e) => {
    setInput(e.target.value)
  }
  return (
    <>
      <input value={input} onChange={handleChange} />
      {input}
    </>
  )
}

コード解説

△input要素内
value={input}は入力フォームの初期値を表します。
onChange={handleChange}は入力フォームの値が切り替わるたびに、inputの値を更新する関数が実行され、画面に表示される{input}の値が変化します。

疑問点

以下のコードと何が違うのか

// Example.jsx
const Example = () => {
  let input = "";
  const handleChange = (e) => {
    input = e.target.value;
  }
  return (
    <>
      <input value={input} onChange={handleChange} />
      {input}
    </>
  )
}

これだと私たちが想像する挙動になってくれません。
理由は、inputをReactのstateとして保持していないからです。
useStateで宣言した値はReactのStateとして保持されます。また、setXxxが実行されstateの値が変更されると、画面が再描画されると同時に画面の値も変化します。
先のuseStateを用いていないコードだと、input変数の値が変化しますが画面が際描画されないのでinputの見た目が変わらないのです。

オブジェクトの状態変化

オブジェクトの状態変化に若干癖があったのでそれも一緒にまとめようと思います。
スプレッド構文を用いるのが一般的なようです。

// Example.jsx
const Example = () => {
  const [person, setPerson] = useState({
    name: "",
    age: ""
  });
  const changeName = (e) => {
    setInput({
      ...person,
      name: e.target.value
    })
  }

  const changeName = (e) => {
    setInput({
      ...person,
      age: e.target.value
    })
  }
  return (
    <>
      <input value={person.name} onChange={changeName} />
      <input value={person.age} onChange={changeAge} />
      {input}
    </>
  )
}

= { ...xxx }とすることで、全く新しいオブジェクトにstateの値に代入することになり、Reactが値の変化を検知するようです。

ちなみに下記のようにコードを書いてもStateの変化を検知せず、再描画が実行されないようです。

const changeName = (e) => {
  const person.name = e.target.value;
  setInput(person);
}

まとめ

初めての投稿ということもあって、全くまとめられてませんがひとまず自己満で記事を書いていくので温かい目で見守っていただけますと幸いです。
今回はここまで。