2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

ReactのpropsとuseState()の分割代入でカッコ{}[]が違うのはなぜ!!!??

Last updated at Posted at 2021-12-12

#propsで受け取る場合と、useState()で受け取る場合が違う・・・
propsは親から子へパラメータを受け渡すときに使うヤツ。
useState()は変数を動的に変化させるときに使うヤツ。

チュートリアルで「どっちも分割代入で受け取るよ!」とは言うものの、
なんか受け取るときのカッコが違くね?と疑問に思った初心者向けです。

##どっちも分割代入で配列を受けとる

props
const {name, age} = props;
useState()
const [num, setNum] = useState([]);

propsは{}中括弧で受け取るのに対し、useState()は[]大括弧で受け取る。
この違いがすごい気になりました。

##オブジェクトか配列かの違い
そもそもの勘違いでpropsは配列リテラルではなく、オブジェクトリテラルが帰ってきている。というだけの話。
jsに慣れてないので、この値の違いがいまいちわからずハマってました。。。
まあ詳しくはjsの分割代入のリファレンス読んでください。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

##要はこういうこと(※簡単に理解するためのイメージです。)

props
props{
 name : "山田太郎",
 age : 20
};
useState()
let num = 1;
const setNum = (param) =>{
 num = param;
}

// これをuseState()の戻り値として返してるイメージ
const state[num, setNum]

実際にそういう実装になってるとかっていう話ではないです。
ReactというかJavaScriptのお話でした。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?