[今さら始める React マスター #4] Propsでコンポーネントをつなぐ

Propsとは？

Propsは、親コンポーネントから子コンポーネントへ渡すデータです。コンポーネントを再利用しやすくするために重要な仕組みです。

基本例

function Greeting({ name }) {
  return <p>Hello, {name}</p>;
}

function App() {
  return <Greeting name="React" />;
}

App から Greeting に name を渡しています。子コンポーネントは受け取った値を表示します。

複数のProps

function UserCard({ name, role }) {
  return (
    <article>
      <h2>{name}</h2>
      <p>{role}</p>
    </article>
  );
}

Propsを使うと、同じコンポーネントに違うデータを渡して使い回せます。

<UserCard name="Sato" role="Frontend Developer" />
<UserCard name="Tanaka" role="Designer" />

Propsは読み取り専用

子コンポーネントはPropsを直接変更しません。値を変えたい場合は、親側でStateを持ち、更新関数を渡す形にします。

学習のポイント

Reactでは、画面を小さなコンポーネントに分け、Propsでデータを渡します。「親から子へデータが流れる」と覚えると、Reactの設計が理解しやすくなります。