Reactで絶対に抑えるべき『props』とは?

React
GraphicMama-teamによるPixabayからの画像

今日は気持ちのいい日曜日だブゥ!

こんな時は、師匠のところに行ってプログラミングの勉強でもしようっと!

師匠こんにちは!

師匠

とんぺいくん。こんにちは。

よく来たね。じゃあ今日から2回に分けてReactで開発する上では欠かせない、propsstateについて学んでいこう!

まずはpropsからだね。

よろしくお願いしますだブゥ!

名前一覧を作ってみよう

まずはcreate-react-appから

師匠

じゃあ今回は、名前一覧を表示するリストを作成しながらpropsのことを理解していこう。

まずは恒例のcreate-react-appコマンドでフォルダを作成しよう。

とんぺいくんはcreate-react-appコマンドの使い方を覚えているかな?

create-react-appコマンドの使い方は完璧だブゥ!

師匠!できたよ!

師匠

さすがとんぺいくんだね。

じゃあ、早速作成したディレクトリに移動してアプリを立ち上げよう。

この方法も覚えているかな?

cdコマンドでディレクトリを移動して、yarn startでアプリを起動…

できたブゥ!

Nameコンポーネントを作成する

師匠

うん。いい感じだね。

それでは、コードエディタを開き、srcディレクトリの中にあるファイルを全て削除し、新たにindex.jsApp.jsのファイルを作成しよう。

うん。

いい感じだブゥ!

師匠

その調子だね。

じゃあ次にName.jsというファイル名でComponentを作成し、App.jsファイルに、作成したNameコンポーネントを挿入してみよう。

こんな感じで、いいのかブゥ?

師匠

そうだね。

その感じで、表示される名前が変わったならOKだよ。

じゃあ次は複数のNameコンポーネントをAppコンポーネントに組込もう。

1度コンポーネントを作ってしまえば、簡単に取り外しができると言うことがReactの特徴だったね。

それもちゃんと覚えてるブゥ!

え〜っと、App.jsファイルにNameコンポーネントを追加するっと…

表示する名前の数を増やす

師匠

うん。表示される名前が複数に増えたね。

じゃあここで、1人の名前ではなくて複数人の名前を表示したい場合にとんぺいくんはどうすればいいと思う?

う〜ん…

Nameコンポーネントの中の名前を書き換えるか

また新しくコンポーネントを作成する

になるのかなぁ〜?

師匠

なるほど…

そのどちらも、あまりいい方法ではないかな…

新しい名前が追加されるごとにコンポーネントを作成していたら、とんでもない数のファイルを管理しなくちゃいけなくなるよね…

そこで、使うのがpropsと言う機能なんだ。

以下のようにApp.jsName.jsを書き換えよう。

複数人の名前を表示する

おぉ!

Nameコンポーネント1つで、複数人の名前が表示できるようになったブゥ!!

propsを解説

師匠

うまくいったようだね。

propsを用いることでComponent間のデータの受け渡しを親コンポーネント→子コンポーネントの1方向のみで実現することができるんだ。

なるほど…

今回は親コンポーネントであるApp.jsから子コンポーネントであるName.jsにnameのデータを渡しているブゥね!

師匠

そういうことだね。

渡す側は、文字列、数値、配列、オブジェクト、関数などを渡すことができ、基本的には{}で括ってpropsを渡していくよ。

一方で、受け取る側では引数としてpropsを指定し、props.nameと書いてあげることで渡されたデータを参照できるんだ。

propsは便利ブゥね!

これがあるおかげで、1つのコンポーネントを作って、そこにデータを流し込めば何通りものUIを表示することができるってことブゥね!!

師匠

その通り!

さすがとんぺいくんだ。

じゃあpropsの講義はここまでにして、次回はstateの講義を進めていこう。

は〜い!

今日はpropsが何かについて理解することができたブゥ!

師匠ありがとう!

バイバ〜イ!

師匠

はい。さようなら。

それでは最後に、今日のまとめをして終わりにしよう。

まとめ

propsを用いることで、Component間のデータの受け渡しを実現することができる。

渡す側(親コンポーネント)は{}で括ってpropsを渡していく

受け取る側(子コンポーネント)はprops.データ名とすることで、渡されたデータを参照できる。

コメント

タイトルとURLをコピーしました