【React基礎】propsとは？親子コンポーネント受け渡し方をわかりやすく解説！

こんにちは！駆け出しエンジニアのガッキー（@ExplorerZine）です。

Reactの記事も3回目に突入しました～！

さて、今回はReactのpropsについて解説してみたいと思います。

本記事ではpropsの概要を具体的なソースコード示して解説していきます。

またpropsの書き方は様々ですが、オーソドックスな書き方から

分割代入を使った書き方をご紹介していきます。

是非、最後までご覧ください。

Contents

propsとは？
親コンポーネント・子コンポーネントとは？
proprsの使い方・受け渡し方
- propsを記述して渡す方法
- propsを分割代入して渡す
まとめ

propsとは？

propsとは親コンポーネントから子コンポーネントへデータを受け渡すものです。

先日の記事【Reactとは？】コンポーネント・仮想DOMについて分かりやすく解説！でも

コンポーネントについてご紹介しましたが、

このpropsはReactの特徴であるコンポーネント間のデータの受け渡しで使用するものになります。

親コンポーネント・子コンポーネントとは？

では、親子コンポーネントとは一体なんでしょう。

親コンポーネントは子コンポーネントを呼び出してpropsを渡すもの。
子コンポーネントは親コンポーネントに呼び出されpropsを受け取って使用するもの。

親コンポーネントが子コンポーネントを呼び出す際にデータの受け渡しとしてpropsを使用します。

後ほどソースコードを見ていただくと理解が深まりますよ！

proprsの使い方・受け渡し方

さてここからソースコードを見ながらpropsの使い方を見ていきたいと思います。

propsの受け渡し方は様々な書き方がありますが今回は、

引数にpropsを書いて受け取る方法
引数にpropsは書かずに分割代入して受け取る方法

をご紹介していきます！

propsを記述して渡す方法

import Title from './title.js';

function App() {
  return <Title hoge="propsについて解説！"/>;
}

export default App;

import React from 'react'

const title = (props) => {
  return (
    <div>{props.hoge}</div>
  )
}

export default title

まずは引数にpropsを書いて受け取る方法を見ていきましょう。

上記のサンプルソースコードでは

親コンポーネントがApp.js
子コンポーネントがTitle.js

となります。

親コンポーネントの

return <Title hoge="propsについて解説！"/>;

この部分でTitleコンポーネントへ、

hogeというプロパティに文字列を入れてたものをpropsとして渡しています。

そしてTitle.jsのtitleコンポーネントの

const title = (props) => {

この部分で引数としてpropsを受け取っています。

そしてtitleコンポーネントでhogeを出力しているのでブラウザにはこのように表示されていますね！

propsを分割代入して渡す

import Title from './title.js';

function App() {
  return (
    <div>
      <Title name="React" description="学習中！"  />
    </div>
  );
}

export default App;

import React from 'react'

const Title = ({ name, description }) => {
  return (
    <div>
      <h1>{name}</h1>
      <p>{description}</p>
    </div>
  );
}

export default Title

次にpropsを分割代入で受け取る方法を見ていきましょう。

上のソースコードでは親コンポーネントであるApp.jsで

<Title name="React" description="学習中！"  />

nameとdescriptionというプロパティがpropsというオブジェクトでtitleコンポーネントに渡されています。

そしてtitleコンポーネントで

const Title = ({ name, description }) => {

引数として渡されてきたpropsオブジェクトをnameとdescriptionという変数名で受取り出力しているので

ブラウザにはこのように表示されています。

分割して受け取っているので受取も出力もpropsと記載しなくてもよいので

シンプルなソースコードになります。

まとめ

propsについて解説してきました！

いかがでしたか？？

他にもReactの記事を書いていますので、

是非ご覧いただけたら嬉しいです。

🔽 デスクツアー開催しました 🔽