概要
Reactの学習を進めるなかで、「関数コンポーネントでpropsを渡す際の記述が何通りかあるけど違いはなんだっけ？」と混乱したので整理します。
結論として、ここでは分割代入を使用しているパターンとそうでないパターンについて簡単にまとめます。
分割代入とは
MDNによると
分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。
配列の要素やオブジェクトのプロパティを好きに取り出して、変数（定数）に代入することができます。
Reactでのpropsの渡し方
ここではnameとageをpropsとして渡す<Profile />コンポーネントを例にしてみます。
1. 「props.XX」と書く渡し方
まずは分割代入を使わない書き方だと下記のようになります。
各propsに対してprops.XXと記述する必要があり、数が多いと煩雑です。
export const Profile = (props) => {
return (
<p>私の名前は{props.name}です。{props.age}歳です。</p>
)
2. propsを分割代入する渡し方
ここで<Profile />コンポーネントのpropsの中身をみてみます。
例えば、<Profile name="Yamada" age="26" />としたときのpropsは下記の通りです。
{ name: "Yamada", age: "26" }
このようにpropsはオブジェクトなので分割代入ができます。
というわけで、propsを分割代入すると以下のように書けます。
export const Profile = (props) => {
// propsを分割代入
const { name, age } = props;
return (
<p>`私の名前は{name}です。{age}歳です。`</p>
)
毎回props.XXと書く必要がなくなり、スッキリしましたね！
3. さらに引数の段階で分割代入
さらに、引数にpropsを渡す段階で分割代入すると以下のようになります。
// 引数にpropsを渡す段階で分割代入
export const Profile = ({ name, age }) => {
return (
<p>`私の名前は{name}です。{age}歳です。`</p>
)
propsのプロパティをオブジェクトとして直接渡している、ということですかね。
見た目的には一番スッキリ。
まとめ
propsを渡す記述はいくつかありますが、どのパターンもやってることは一緒なので、プロジェクトのルールや好みで選択するのがよいかと思います。
記事を書いてみて
色んな記述を見て混乱していたのは「propsはオブジェクトである」ということを当初よく分かっていなかったののが大きいように思います。
公式ドキュメントにもこのように書いてありましたw
React がユーザ定義のコンポーネントを見つけた場合、JSX に書かれている属性と子要素を単一のオブジェクトとしてこのコンポーネントに渡します。このオブジェクトのことを “props” と呼びます。