Reactのpropsとは？親子コンポーネント間でのデータ伝達と使い方を徹底解説

Reactのpropsは、ココンポーネント間でデータを渡すための仕組みです。

具体的には、親コンポーネントから子コンポーネントに対してデータを渡すときに使用します。

主な特徴

読み取り専用
props は子コンポーネント内で変更することはできません。子コンポーネントは props を受け取って表示したり、処理に使ったりしますが、直接書き換えることはできません。これにより、Reactのコンポーネントが一方向データフロー（親から子へデータを渡す）を維持しています。
親コンポーネントから渡される
親コンポーネントが子コンポーネントに props を使って任意の値（文字列、数値、配列、関数など）を渡します。子コンポーネントはその props を使ってレンダリングや処理を行います。

使い方

親コンポーネントで子コンポーネントに props を渡す

function ParentComponent() {
  return (
    <ChildComponent name="Tanabata" age={25} />
  );
}

子コンポーネントで props を受け取る

function ChildComponent(props) {
  return (
    <div>
      <p>名前: {props.name}</p>
      <p>年齢: {props.age}</p>
    </div>
  );
}

デストラクチャリング構文

ES6のデストラクチャリング構文を使うことで、props の値を簡単に扱うことができます。

function ChildComponent({ name, age }) {
  return (
    <div>
      <p>名前: {name}</p>
      <p>年齢: {age}</p>
    </div>
  );
}

例: 親から子にデータを渡す

以下は、親コンポーネントが ChildComponent に props を渡している例です。

function ParentComponent() {
  const user = {
    name: "Tanabata",
    age: 25,
  };

  return (
    <div>
      <h1>親コンポーネント</h1>
      <ChildComponent name={user.name} age={user.age} />
    </div>
  );
}

function ChildComponent({ name, age }) {
  return (
    <div>
      <h2>子コンポーネント</h2>
      <p>名前: {name}</p>
      <p>年齢: {age}</p>
    </div>
  );
}

まとめ

props は親コンポーネントから子コンポーネントにデータを渡す手段です。
props は読み取り専用で、子コンポーネント内で変更できません。
データの一方向フローを保ちながら、コンポーネント間でのコミュニケーションを実現します。

Reactの基本的なデータ伝達の仕組みとして、コンポーネント間のデータの受け渡しに多く利用されます。