Props：コンポーネントにデータを渡す

propsを通じてコンポーネントにデータを渡すことで、再利用できるコンポーネントの作り方を学びましょう。

7 分 · 3 問

いつも同じものを表示するだけのコンポーネントは、あまり役に立ちません。Props（「プロパティ」の略）とは、コンポーネントに渡すデータのことで、関数の引数とまったく同じです。招待状を思い浮かべてください。テンプレートは全員同じで、変わるのは招待客の名前だけです。コンポーネントがテンプレートで、propsが名前にあたります。

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

function App() {
  return (
    <div>
      <Greeting name="Lea" />
      <Greeting name="Karim" />
    </div>
  );
}

App の中では、HTMLの属性のように name="Lea" と書きます。Reactはこれらの値をすべて一つのオブジェクトにまとめ、コンポーネントはそれを props という名前で受け取ります。そして波かっこの中で props.name を読み取ります。実際には、関数のかっこの中で直接propsを 分割代入 することがよくあります。function Greeting({ name }) のように。もう一つ大事な点。テキストは引用符の間に入れますが、それ以外のもの（数値、真偽値、配列）は 波かっこ の間に入れます。

function ProfileCard({ name, age }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>{age} years old</p>
    </div>
  );
}

function App() {
  return <ProfileCard name="Nadia" age={31} />;
}

これこそがpropsの真の力です。SNSは投稿ごとに一つずつコンポーネントを書いたりはしません。たった一つ の Post コンポーネントを書き、それに異なるpropsを何百万回も渡すのです。テンプレートは一度だけ書き、どこでも使えます。

理解度チェック

このレッスンの要点をしっかり覚えているか確認しましょう。

1. propsは何のためにありますか？
   • 親コンポーネントから子へデータを渡すため
   • 時間とともに変化するデータを保存するため
   • コンポーネントにCSSのスタイルを適用するため
2. 数値の25を Profile コンポーネントに渡すにはどうしますか？
   • <Profile age="25" />
   • <Profile age={25} />
   • <Profile age=25 />
3. コンポーネントは受け取ったpropsを変更できますか？
   • はい、returnの中で行う限りは
   • はい、ただし文字列だけ
   • いいえ、propsは読み取り専用です