【動かして試せます】Reactにおけるpropsで変数や関数を渡す方法

本記事の目的

今日はReactにおけるPropsを完全理解するために３ケースにおけるPropsの使い方を紹介していこうと思います。

Reactの導入に関しては今回割愛させていただきます。

CodePenというオンラインでReactのコードが動くツールがあるので、それを元に『どう動いているか』を体験していただけたらと思います。

propertiesの略称となっています。

Reactはコンポーネントと呼ばれる再利用できるタグを作成して、コード記述の効率化を図るのを理念にしています。

例えば以下のコードを見てください

const App = () => {
  return (
    <div>
      <h1>Hello admin!</h1>
      <h1>Hello general!</h1>
    </div>
    );
}

全体のうちの一部にはなりますが、h1タグで同じような内容をふたつ描画しています。

まだ２つですので、コード量も可愛いものです。

これが楽天やAmazonの商品リストだと思ってみてください。

多分記述量で手が死にます（笑）

このような冗長性を解消させるためのコンポーネントで、それを導入するのに使われるのがpropsというイメージです！

propsは親コンポーネントから子コンポーネントに渡されることを頭の片隅に置いておいてください。

後で説明します。

公式ではfunctionを使用していますが、JSX記法を使用しているだけですので、本質は変わりません。

propsの使用方法としては、

子コンポーネントであるHelloの引数にprops(※1)を持たせ、どのキーワードでそれを子コンポーネント上で呼び出すかを決める。（例だとuserというキーワードです）
Appコンポーネントの中でHelloコンポーネントを呼び出す。その際にHelloコンポーネントのタグにpropsで渡したい変数や文字列を入力

これによりpropsで受け取った内容を描画しています

※1→命名自体は正直なんでもいいです。しかし、皆がpropsというキーワードを使っているので、他の人にコードをみてもらっても理解できるようにpropsで命名することをお勧めします！