今回の記事はReactのpropsについての説明です。あくまでも概念ですので、全くの初心者の方向けになると思います。
まずはpropsが何なのかから。あまり日本語で書かれることはなく英語でそのまま「props」として表記されることが多いです。この時点で一気にげんなりしてしまう人もいるかもしれません。
そこでご紹介です。あえて日本語にすると「プロパティ」です。英語でもともと「peoperties」というところを短くして「props」となっています。
プロパティとはつまり「属性」です。これでかなり取っ付きやすくなったのではないでしょうか。
まだわからなくて大丈夫です。もう少し詳しく見てみましょう。「属性」をどのように使うのかです。属性とはつまり、ものの固有の性質や特徴ということになります。
以下の例を見て考えてみましょう。
iPhoneを買った。見た目がシンプルだ。自分らしさをプラスするために緑色のスマホケースを買おう。
このスマホケースの部分が属性です。個性を出すところです。これこそが「props」の役割です。
通常、製品があります。誰が買っても基本的には同じです。個性がありません。それでは物足りないので特徴を加えます。スマホケースが便利です。このスマホケースこそが「props」となります。
propsについての理解を深めるためには、親コンポーネントと子コンポーネントを理解する必要があります。Reactではコンポーネントが大事な構造の単位になります。
Reactでは、propsは親コンポーネントによって設定され、子コンポーネントに渡されます。子コンポーネントはpropsを受け取り、それを使ってUIをレンダリングしたり動作を定義したりできます。
つまり、親コンポーネントは、子コンポーネントにpropsを付与することで、子コンポーネントに特定の情報を渡すことができます。これにより、冗長なコードを何度も記述する必要がなくなります。これが、Reactのコードのいわゆる「再利用のしやすさ」の実現に一役買っているというわけです。
