Propsとは？

コンポーネントを再利用できるのは便利ですが、3つの全く同じ星があっても用途は限られます。Props（プロップス）を使うとコンポーネントにデータを渡すことができるため、複製したそれぞれのコンポーネントを異なる表示にできます：

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

export default function App() {
    return (
        <div>
            <Greeting name="Ada" />
            <Greeting name="Alan" />
        </div>
    );
}

ここでは2つのことが起こっています:

• 渡す: propsは属性のように見えます: name="Ada"
• 受け取る: コンポーネントはパラメータリスト（{ name }）の中でそれらを展開し、通常の変数と同様にJSX内で使用します

同じコンポーネント、異なるデータ、異なる出力: Hello, Ada! と Hello, Alan!。Propsは親コンポーネントが子コンポーネントを設定するための仕組みです。