React | propsとは？コンポーネントにデータを渡す方法 – 7/12

propsは「親から子へデータを渡す仕組み」です。まずは一方向データフローの基本を押さえ、よくあるミス（propsの書き換え）を避けます。

propsの役割：再利用を成立させる

同じUIでも表示する内容が違うことがあります。例えば「ユーザー名」や「記事タイトル」です。
その違いを外から渡せるようにするのがpropsです。

親（App）:

<UserCard name="Taro" role="admin" />

子（UserCard）:

export default function UserCard(props) {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Role: {props.role}</p>
    </div>
  )
}

このようにpropsで表示内容を変えられるので、コンポーネントが再利用可能になります。

propsは分割代入すると読みやすいです。

export default function UserCard({ name, role }) {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Role: {role}</p>
    </div>
  )
}

propsは「親から渡される入力」です。子コンポーネント内で書き換えるのは避けます。

このルールが崩れるとデータの流れが追えなくなり、バグの温床になります。