Reactにおける『props』を理解しよう！

#概要
propsとはComponentの属性のことです。
props.nameやprops.pageなどあるデータの属性に関して参照できるもののことを言います。
文字列、数値、配列、オブジェクト、関数などなんでも使用することができ、基本的には{}で括ってpropsを渡していきます。

前回の記事
ReactにおけるComponentを解説！

次回
Reactにおける『state』を用いて、入力された文字数をカウントしてみよう！

#実際にコードを書いてみよう！

App.js

import React from 'react';

const App = () => {
  return (
    <div>
      <Animal name={'Micro Pig'} />
    </div>
  );
};

const Animal = props => {
  return <div>I love {props.name}</div>;
};

export default App;

関数コンポーネントAppの中で<Animal name={'Micro Pig'} />とすることでAnimalコンポーネントにname属性を付与することができました。
そして、関数コンポーネントAnimalの中でpropsを引数に受け取り、return <div>I love {props.name}</div>;とすることで以下のように外からの入力を参照して画面に表示することができます。

さらに、このAnimal属性に体重（weight）属性を付与し、変数で動物の情報を管理し、mapを用いて１つずつ表示しようとすると、コードは以下のようになります。

App.js

import React from 'react';

const App = () => {
  const animalProfiles = [
    {
      name: 'Micro Pig',
      weight: 20,
    },
    {
      name: 'Lion',
      weight: 100,
    },
    {
      name: 'Penguin',
    },
  ];
  
  return (
    <div>
      {animalProfiles.map((profile, index) => {
        return (
          <Animal name={profile.name} weight={profile.weight} key={index} />
        );
      })}
    </div>
  );
};

const Animal = props => {
  return (
    <div>
      I love {props.name}! Max-weight is {props.weight}kg
    </div>
  );
};

Animal.defaultProps = {
  weight: 50;
}

export default App;

#解説

const animalProfiles = [
    {
      name: 'Micro Pig',
      weight: 20,
    },
    {
      name: 'Lion',
      weight: 100,
    },
    {
      name: 'Penguin',
    },
  ];

この部分でanimalProfile[]の配列を作成し、ハッシュを使い、nameとweightを付与しています。

---

App.js

return (
    <div>
      {animalProfiles.map((animalprofile, index) => {
        return (
          <Animal name={profile.name} weight={profile.weight} key={index} />
        );
      })}
    </div>
  );

この部分では、上記のanimalProfiles[]の各要素を取り出してAnimalコンポーネントのname属性とweight属性にデータを渡しています。
また、Reactには仮想DOMが存在しており、その中でどのDOMが変更になったのか管理し、変更点のみを実際のDOMに反映していくという仕組みがあります。したがって、どのDOMが変更になったかを指し示すためにオリジナルのKeyというものが必要になります。ここではmapを使うことで得られるindexをKeyにすることでDOMの管理を行なっております。

---

App.js

const Animal = props => {
  return (
    <div>
      I love {props.name}! Max-weight is {props.weight}kg
    </div>
  );
};

Animal.defaultProps = {
  weight: 50,
};

この部分では、実際に親のコンポーネントから受け取ったpropsをもとにブラウザにレンダリングを行なっています。Animal.defaultProps = { weight: 50,};の部分では、propsを受け取るコンポーネントにデフォルトで値を設定しておくことにより、今回の場合はweightのないデータを与えられた際に自動的にweight: 50を付与します。

###出力される画面はこちら

#まとめ
以上のように親のコンポーネントから子のコンポーネントに、あるデータを渡したいといった時にはこのpropsを大いに利用して行きましょう！