【React】Props ?

# はじめに

この記事は「🎄[はじめてのアドベントカレンダー Advent Calendar 2023](https://qiita.com/advent-calendar/2023/first-time)🎅」の18日目に参加しています。

今回は**React**を学ぶ過程で出会った**Props**についてまとめてみました！


:::note warn
プログラミング初学者のため、内容に誤りがある可能性があります。間違いを見つけたら、ぜひ教えてください！
:::

## Propsとは何か？
Reactでは、親コンポーネントと子コンポーネントの間でデータをやり取りする必要がよくあります。Reactでのコンポーネント間のデータの受け渡しには「Props」を用います。
Propsとは、「プロパティ(性質・特徴)」を意味する名前です。

Reactでコンポーネントを使う際、そのコンポーネントに初期設定値のようなものを渡したい場合があります。

例えば、ボタンの文字を変更したり、色を変えたかったり、最初に表示するメッセージを設定したり。
この時に使うのがPropsです。親コンポーネントが子コンポーネントに値を渡す入れ物として機能します。

「親から渡す手紙」のようなものです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364974/9ed5e4ed-4f90-d2be-41a8-71d78dde1380.png)


子コンポーネントは渡されたPropsを見て、その通りの表示や動作をするという関係です。

このようにPropsを使うことで、コンポーネントに独自の性質や特徴を付加できます。

### Propsの渡し方

Propsは以下の2つの方法で渡すことができます。

1. `<コンポーネント名 props={propsオブジェクト}>`の形式で直接渡す。
2. `<コンポーネント名 {...propsオブジェクト}>`の形式でスプレッド構文を使用して渡す。

方法 1: 直接Propsを渡す
この方法では、propsを個別にコンポーネントに渡します。各propはコンポーネントの属性として明示的に指定されます。

```
const ParentComponent = () => {
  const user = {
    name: 'John Doe',
    age: 30,
  };

  // 直接propsを渡す
  return <ChildComponent user={user} />;
};

const ChildComponent = ({ user }) => {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.age}</p>
    </div>
  );
};
```
この例では、ParentComponent から ChildComponent へ user という名前のpropを直接渡しています。

方法 2: スプレッド構文を使用してPropsを渡す
スプレッド構文を使用すると、オブジェクト内のすべてのプロパティをコンポーネントのpropsとして展開できます。これは特に、多くのpropsを渡す必要がある場合に便利です。
```
const ParentComponent = () => {
  const user = {
    name: 'John Doe',
    age: 30,
  };

  // スプレッド構文を使用してpropsを渡す
  return <ChildComponent {...user} />;
};

const ChildComponent = ({ name, age }) => {
  return (
    <div>
      <h1>{name}</h1>
      <p>{age}</p>
    </div>
  );
};
```
この例では、ParentComponent は user オブジェクトのすべてのプロパティを ChildComponent に渡しています。スプレッド構文 ({...user}) により、user オブジェクト内の各プロパティが個別のpropとして ChildComponent に渡されます。

### Propsの受け取り方

子コンポーネントでは`props`オブジェクトとしてPropsを受け取ります。このオブジェクトには、親コンポーネントから渡された全てのPropsが含まれています。

### Propsの例

```jsx
// 親コンポーネント
const ParentComponent = () => {
  const user = {
    name: 'John Doe',
    age: 30,
  };

  return <ChildComponent user={user} />;
};

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

// 分割代入でuserオブジェクトからnameとageのみ取り出すことも
const ChildComponent = ({user}) => {
  
  const {name, age} = user; 

  return (
    <div>
      <h1>{name}</h1>  
      <p>{age}</p>
    </div>
  );
};
``` 
この例では、ParentComponentがChildComponentにuserというPropsを渡しています。ChildComponentはこのPropsを使ってユーザーの名前と年齢を表示しています。

 分割代入を使用しuserオブジェクトからnameとageのみ取り出すこともできます。
```
//
const ChildComponent = ({user}) => {
  
  const {name, age} = user; 

  return (
    <div>
      <h1>{name}</h1>  
      <p>{age}</p>
    </div>
  );
};
``` 
### Propsの特性
Propsは読み取り専用です。親コンポーネントから子コンポーネントへ一方通行でしかデータを渡すことはできません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364974/b1303097-012d-e5ab-5662-7a4d6f7ef925.png)

子コンポーネントはPropsを通じてデータを受取ることができますが、逆に親コンポーネントにデータを渡すことはできません。

つまり、データの流れは親 → 子 の一方向に限られています。この一方向のデータフローがPropsの大きな特徴です。

これは何故かというと、データの変更を明確なルールで制限することで、思わぬエラーや混乱が起きないようにする為です。

これによりコンポーネント間でのデータの受け渡しが明確になり、予期しない副作用を防ぐことができます

では、データの変更はどうするのかというと、Reactにはstateという機能があり、こちらを使ってデータの変更を実装します。stateを使えば、データ変更のタイミングと方法をコントロールできます。

つまり、Propsとstateにはそれぞれ違う役割があり、Propsはデータの固定/読み取り、stateはデータの変更/更新 を担当するという感じです。


# まとめ
Reactを学ぶ上でPropsを理解することはとても大切だと学べました。これからもReactの学習を続けていきたいです！

# 参考文献

https://qiita.com/rettoukan/items/1381f2095baed379c4d4

https://zenn.dev/ynakamura/articles/e562376735d398

https://www.udemy.com/course/react-complete-guide/