propsをなんで使うのか

Posted at 2026-07-01

はじめに

Reactでpropsというワードが出て来て、使い方も、使う必要性がわからなかったのですがコンポーネントという部品を作ったときに何となくわかったので整理することにしました。

propsは親から子へ情報を受け渡す仕組みです。
親が子に情報を明示的に渡すのがpropsです。

Reactはコンポーネントを完全に独立した部品として扱う。

子コンポーネントは外側の情報を知らないから
外側の情報を使いたいなら明示的に受け取ってねという仕組み。

棚板（子コンポーネント）は
自分が何段目につくか知らない

・本棚の高さ
・段数
・幅
・色
こういった情報を知らないので、

親（本棚の設計）が棚板に対して、
何段目　position
幅　width
色　color

という取り付け情報を（props）に渡す必要がある

実際には下記のようなコードになります

親コンポーネント（呼び出し側）

function Bookshelf() {
 const shelfPostition = 2;
 return(
     <ShelfBoard position={shelfPostion} width={80} color="brown"/>
 );
}

子コンポーネント（呼び出される側・部品）

function ShelfBoard ({position, width, color}) {
    return (
     <p>{position}段目に{width}cmの色{color}の棚板を取りつけます。</p>
    )
}

この時propsは

props = {
  position: 2,
  width: 80,
  color: "brown"
}

このような中身をもったオブジェクトになっている

親コンポーネントで下記のように好きな名前で受け取る変数を指定し{}の中に渡したい内容を書く
position={shelfPostion}

 <ShelfBoard position={shelfPostion} width={80} color="brown"/>

・子コンポーネントは親、外側の情報を知らない
・親が明示的に情報を渡す必要がある => props

そのためpropsを使って外側の情報を使う