アロー関数(Arrow Function)を用いたプロップス(Props)の受け渡し方: () vs {}

プロップス(props)に()を使う例

const printNumber = (number) => {
  console.log(number);
};
// 渡す側
printNumber(5); // output: 5

数値、文字列、オブジェクト全体、配列全体、などを渡す。

プロップス(props)に({})を使う例

const printNumber = ({ number }) => {
  console.log(number);
};

// 渡す側
printNumber({ number: 5 }); // output: 5

オブジェクト(や配列)の中身を渡す。

プロップス(props)に({})を使い、オブジェクトの特定のプロパティを渡す例

const Component = ({ number }) => { //分割代入（destructuring assignment）という
  return <div>{number}</div>
};
// 渡す側 
<Component number={anObject?.number} />

anObject の number プロパティを渡す。anObject.number の値が一定でないときなどに使う。