はじめに
初めまして！
エンジニアになって数年、今まで本を読むだけでしたが、もっとプライベートで楽しみながら成長したい！自分が学んだ足跡を残していきたい！と思い記事を書きました！
最終的には自在に開発できるようになりたいと思っています。
いろいろな記事を参考にさせてもらっています。
その中でもこれってどういう意味？とかつまづいたところを念入りに書いていこうかと思います。
今回の目的
前回の続きです。今回も「インタラクティビティの追加」。被る部分もあると思いますが、後で振りかえって深掘りするきっかけになるのが理想です。細かく書くと大変なのであっさりめ。
使用したものや事前準備
・Macbook Pro
・Visual Studio Code
主に参考にさせていただいた記事
state内のオブジェクト更新
positon内のxとyを直接変更しているコード。本来ならstateに直接代入はできずset関数を使うのだがオブジェクト内の値は代入で変更可能である。
ただし、この場合、set関数を使用していないので再レンダは行われない。
const [position, setPosition] = useState({
x: 0,
y: 0
});
return (
<div
onPointerMove={e => {
position.x = e.clientX; //このイベントハンドラが発火しても再レンダが行われることはない。
position.y = e.clientY;
}}
...
下記のように修正する
onPointerMove={e => {
setPosition({
x: e.clientX,
y: e.clientY
});
}}
スプレット構文を使用した部分的な更新
下記のようなオブジェクトを変更したいときset関数に書くのは一手間かかる。
const [person, setPerson] = useState({
firstName: 'hoge',
lastName: 'fuga',
email: 'hogefuga@info.com'
});
愚直に変更するなら
setPerson({
firstName: e.target.value,
lastName: person.lastName,
email: person.email
});
👆ただ上の書き方の場合、オブジェクト内の値が増えた時に書くのが面倒
オブジェクトスプレッド構文を使用する。
※スプレット構文は１レベル深いコピーのみのためオブジェクトの中にさらにオブジェクトがある場合は注意。
setPerson({
...person, // ここで全ての値をコピー
firstName: e.target.value // 更新する値を記述するとオーバーライドしてくれる
});
オブジェクト内で参照されているオブジェクトの更新は？
下記のような構成なら
const [person, setPerson] = useState({
name: 'fuga',
artwork: {
title: 'hoge',
city: 'tokyo',
image: 'https://example.com,
}
});
このようになる。（他の方法もある
つまり、深い階層を更新したいときはオブジェクトの階層ごとにスプレット構文を用意するといい。
setPerson({
...person,
artwork: {
...person.artwork,
city: 'New Delhi'
}
});
※スプレット構文が面倒な時はライブラリであるuseImmerを使うと簡潔にかける
終わりに
state内のオブジェクト更新にはスプレット構文を使用して間違いが起きないようにして、更新したい値だけオーバーロードする。
useImmerも使えるようになっていきたい。
次