はじめに
Reactの勉強を始めたときに、まず、useStateが何なのか全然分からなくて、
最近こういう事だったのか！と腑に落ちたので自分の理解を整理してみます。
間違いがあれば教えていただけると幸いです。
useStateを見たときの違和感
useStateと言えば以下のようなやつです
const [text, setText] = useState("");
はじめてみたとき、変数の名前が配列みたいになっているし、
配列になんで同じような変数を２個も書かないといけないんだろう。
setってなんだ？と思っていました。
分割代入の理解不足
実は、＝の左側の配列[]の部分は全くReact特有の書き方ではなく、Javascriptの分割代入という構文でした。
また、分割代入というワードでまず、？？？となり、アレルギーを引き起こしそうになりました。
分割代入とは
= の右側にある、オブジェクトや配列から、必要な値だけを取り出して、変数に入れる書き方でした。
例えばこのような場合は、
const arr = ['hello',3];
const [text, num] = arr;
textは「hello」
numは「3」を受け取っています。
ReactのuseStateが配列を返すので、
その中で分割して値を受け取っているだけでした。
なぜ分割の２番目の変数はset○○と書くのか
const [text, num] = useState("");
と書いても動くのになぜよく
const [text, setText] = useState("");
とsetTextのような分割代入の２番目に記載されている関数が
set○○○という風に書かれているのか気になっていました。
理由としては、
- react公式のドキュメントがset○○という名前を使っている
- 状態を管理する変数だと一目で分かりやすい
- コミュニティー全体でこの命名が慣習とされている
React公式ドキュメントでは、useState の返り値を
「慣習として [something, setSomething] のように命名する」と説明されています。
引用：
state 変数は慣習として、分割代入を利用して [something, setSomething] のように命名します。
（React公式ドキュメント / useState）
つまり、Reactが強制しているわけではなく、
読みやすさのために、書かれていたことが分かりました。
まとめ
自分が理解したpointは３つでした。
- useStateは「値」と「更新関数」を返す
- 左側の配列はJavascriptの分割代入だった
- set◯◯は慣習
Reactの独自の書き方ではなく、Javascriptの構文がかなり関係していたことが分かりました。
次は、propsについてまとめてみようと思います。