Reactを極める！

Reactの自己学習と仕事での実務がやっとリンクしてきました！（遅いw）

例えば下のようなコードでは

名前と年齢の初期値があって、入力すると更新され、リセットボタンを押すと空欄になる
という機能になっています。

import { useState } from "react";

const Example = () => {
  const personObj = { name: "Tom", age: 18 };
  const[person, setPerson] = useState(personObj);

  const changeName = (e) => {
    setPerson({name:e.target.value, age:person.age})
  }

  const changeAge = (e) => {
    setPerson({name:person.name, age:e.target.value})
  }

  const reset = () => {
    setPerson({name:"", age:""})
  }
  return(
    <>
      <h3>Name:{person.name}</h3>
      <h3>Age:{person.age}</h3>
      <input type="text" value={person.name} onChange={changeName}/>
      <input type="number" value={person.age} onChange={changeAge}/>
      <div>
        <button onClick={reset}>リセット</button>
      </div>

    </>
  );
};

export default Example;

でもこのコードはもっと見やすく、わかりやすく書くことができます。

どこを見やすくしていくか、というと名前と年齢の値をsetPersonで変更状態にするときの処理です。

 const changeName = (e) => {
    setPerson({name:e.target.value, age:person.age})
  }

このように上記では名前にフォーカスし、年齢は初期値を表示するように書いていますが、この場合は下記のように
初期値のオブジェクトを展開して、そこに新しい変更されたプロパティを追加するという形で書くといいです。

setPerson({ ...person, name:e.target.value})

実務でもこの書き方は教えてもらってよく使いました。

今ならすこしわかる気がします😅

もう1つ注意点があります。

 const[person, setPerson] = useState(personObj);

このように初期値に上記ではpersonObjを渡しています。

しかし、この初期値は一番最初のレンダリングの時のみ使用されます。
2回目以降のレンダリングでは、更新したものをさらに更新して…
というように、漸増的になっていきます。

でないと、更新するたび、いちいち初期値に戻るのは、意図する挙動ではないからです。

ではそういった場合はどうすればいいか。

stateには①オブジェクトを渡す場合と②関数を渡す場合
の2種類があります。

非同期で更新されたものをさらに更新したい..というときは
②の関数を使うのが好ましいです。

その場合、下記のように書き換える必要があります。

const changeAge = (e) => {
    setPerson({name:person.name, age:e.target.value})
}

これを

const changeAge = (e) => {
    setPerson(person => {name:person.name, age:e.target.value})
  }

こう書き換えると、常に最新のperson に対して新しい値を追加する、という機能の実装になります。

次は配列のstateについてです。
ここでJavaScriptの基本的なメソッドについて。

popメソッドー配列の一番最後を削除する
unshiftメソッドー配列の先頭に要素を追加する

ここがわかりやすい！

午前はここまで。

---

お散歩などしてリフレッシュ後は

旦那さんとReactで実際にタイピングゲーム見たいの作ってみよう！

ということになって
一緒に勉強しながら作ってみることにしました✨

ただ、旦那さんのchatGPT力と微力の私の知識を利用してw

タイピングゲームの簡単なのが共同でつくれた！

これがchatGPTに頼らずにつくれたら
さらに理解が深まるんだろうな！

今度やってみます。