サル🐵でもわかるReactのProps【初心者向け】

React（リアクト）のProps（プロップス）は、コンポーネント間でデータを渡すための仕組みです。

子コンポーネントにデータを渡すときに使います。簡単に言えば、親から子へプレゼントを渡すようなものです。🎁

Propsの使い方

Propsを使うときは、まず親コンポーネントでデータを用意します。そして、子コンポーネントに渡したいデータを属性（アトリビュート）として書きます。

例えば、こんな感じです。

// 親コンポーネント
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const message = 'こんにちは、子コンポーネント！';

  return (
    <div>
      <ChildComponent text={message} />
    </div>
  );
}

export default ParentComponent;

親コンポーネントでmessageというデータを用意しました。そして、<ChildComponent>のtext属性にそのデータを渡しています。

次に、子コンポーネントでPropsを受け取ります。

// 子コンポーネント
import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      <p>{props.text}</p>
    </div>
  );
}

export default ChildComponent;

子コンポーネントでpropsという引数を受け取りました。props.textで親から渡されたデータを使っています。

まとめ

ReactのPropsは、親コンポーネントから子コンポーネントへデータを渡すためのものです。親コンポーネントでデータを用意し、子コンポーネントに属性として渡します。子コンポーネントではpropsで受け取り、使うことができます。