Propsによるデータの受け渡し

コンポーネントは、使用される場所によって異なるデータを表示する必要がある場合が多くあります。React では、データは props を使ってコンポーネントに渡されます。 Props はコンポーネントへの入力値です。これにより、親コンポーネント から 子コンポーネント へデータを送信し、コンポーネントが表示する内容を制御できます。

値をコンポーネント内でハードコーディングする代わりに、props によりコンポーネントの再利用が可能 となります。同じコンポーネントを異なるデータで複数回使用でき、異なる UI 出力を生成します。

以下は、props を使ってコンポーネントにデータを渡す簡単な例です:

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

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

この例では、App コンポーネントが Greeting という prop を使って値 "Olivia" を name コンポーネントに渡しています。Greeting コンポーネントはこのデータを受け取り、UI に表示します。