世界イチわかりやすいReactのPropsバケツリレーを説明してみた

どうも深夜1時、会社の飲み会帰りでテンションがHIGHになっているへっぽこです。
初心者エンジニアでReactを最近使い始めたよって言う人、ReactのPropsバケツリレーって聞いたことありません？

はい！それへっぽこも知ってます！
でも親コンポーネントから子コンポーネントにPropsを渡すんやとか言われてもさっぱりわかんない・・。

そう！かくいうへっぽこもSES営業上がりの文系卒のエンジニア歴1年の雑魚スライム。
バケツリレーとはなんぞや・・彷徨い果てた末、社内イチ技術オタクの「Y君」に小1時間ぐらい説明してもらいました。

そしてなんと・・・

＼Propsバケツリレーを理解するのです／

ということで、今回は初心者スライムのみなさんのために、世界イチわかりやすいPropsバケツリレーを解説してみました。

React がユーザ定義のコンポーネントを見つけた場合、JSX に書かれている属性と子要素を単一のオブジェクトとしてこのコンポーネントに渡します。 このオブジェクトのことを “props” と呼びます。

参考 コンポーネントとpropsReact

↑こんなん言われたってさっぱりわからないよね┓(´Д｀)┏
はい、過去の自分です。
ちなみにエンジニア歴が超浅い雑魚の言うことなんで、細かい指摘は勘弁してください。
イメージだけ掴んで今日は帰ってください^^

Propsとはなんぞや！

わかりやすくいうとパラメーターです！
例えば人間を識別するために、田中さんという名前があります。
それをプログラミングで表すと

name: "田中"

となります。
このようにパラメーターをReactの世界ではPropsと呼びます。
(少なくともへっぽこはそう思ってます)

じゃReactのPropsバケツリレーって何？？

本題のPropsバケツリレーに入るわけですが、その前にReactの仕組みについて説明した方が理解がスムージーです。
Reactは超簡単に言うとコンポーネントっていう部品をたくさん組み合わせてアプリケーションを作ります。

イメージ的には、家を作るために木材やノコギリ、釘などの『コンポーネント』を組み合わせるって感じですね。
しかし、Reactの世界では木材やノコギリ、釘などの『コンポーネント』には親子関係があります。
例えば、ノコギリという親がいて、その素材である鉄がその子供って感じのイメージです。

つまり、Reactではノコギリという親のコンポーネントがあり、鉄をその子供と表すということにより、鉄がどのような役割を果たすか感覚的につかめるという特徴があるということですね。うんわかりやすい！！
これが親子関係があるコンポーネント(部品)を組み合わせてアプリケーションを作るということです。

ここまで来ればPropsバケツリレーというものがわかってくると思います。
つまりPropsバケツリレーは

パラメーターを親から子へ渡す

ということです。

では実際のコードを見てみましょう。

コードで実践！Propsバケツリレー

オブジェクト編

コメントアウト{/* */}の中で説明みてくださいね。

■親コンポーネント(パス：/)

import React from "react";
import { Man } from "./Man"

function Human() {
  const tanaka = "田中"

  return (
     
    {/* ↑tanakaというオブジェクトをManという子コンポーネントに渡す。nameはあくまでキーなので、名前はなんでも良い。つまり、Human(人間)の親コンポーネントがMan(男性)というコンポーネントに田中という名前を渡しているということ。 */}
  )
}

■子コンポーネント(パス：/)

import React from "react";

export function Man(props) {
  {/* ↑親コンポーネント(Human)ですでに　子コンポーネント(Man)がインポート(import)されて、使用されてるので、自動的にHumanが親、Manが子供と判別される。つまり、子コンポーネントのManの引数(括弧の部分)にpropsを入れることにより、親コンポーネントで渡された『name: tanaka』を受け取ることができる。 */}

  const name_man = props.name
  {/* ↑「props」というワードで明示的に親からきたものですよと表す。そこにprops.nameとすることで親からきたnameというキーを使いますよと指定をする。そうすることでprops.nameは"田中"となる。 */}

  return (
    <>
      {name_man}
    </> 

  )
}

田中

ちょっとここからレベルアップします。
React初心者の人はむずいかも。

propsちょっとできたらまた来てね。
でも関数渡すことは避けて通れないから覚えないといけないかも。

■親コンポーネント(パス：/)

import React from "react";
import { Man } from "./Man"


function Human() {

  const [name, setName] = React.useState("");

  function changeName(name) {
    setName(name)
  }
  return (
     
  )
}

import React from "react";

export function Man(props) {
  props.changeName("田中")
}/

おわり！

ワンクリックでランキングに協力してください(´；ω；｀) ↓

にほんブログ村

※万一記事に関わる個人・団体の方で記事の削除依頼がある場合、本サイトのお問い合わせから連絡ください。内容を確認させていただきます。