🎁

【React基礎】親から子へデータを渡す「Props」の仕組みと活用術

に公開
React
初心者
frontend
tech

1.はじめに

Reactでは、コンポーネント間でデータをやり取りするために「Props（プロップス）」という仕組みを使用します。

Propsは、親コンポーネントから子コンポーネントへデータを渡すための手段であり、コンポーネントの再利用性を高める重要な概念です。

HTMLの属性（srcやwidthなど）と同じ感覚で、コンポーネントに情報を渡すことができます。

今回はそんなPropsの基本的な使い方と活用術について解説します！

2.Propsを渡す"親"の書き方

Propsを渡す親コンポーネントでは、子コンポーネントを呼び出す際に、HTMLの属性のようにプロパティ名と値を指定します。

<Avatar 
    person={{
        name: 'vanilla ice',
        imageId: '1bX5QH6'
    }} 
    size={100} 
/>

ポイントとしては、文字列についてはダブルクオーテーション""で囲み、数値やオブジェクト、配列などのJavaScriptの式については波括弧{}で囲む点です。

ここについては、別の記事でも詳しく解説していますので、もしよろしければご参照ください！

3.Propsを受け取る"子"の書き方

子コンポーネントでは、親コンポーネントから渡されたPropsを関数の引数として受け取ります。

以下、具体例です。

interface Props = {
    person: string;
    size: number;
}

function Avatar({ person, size }: Props) {
    // ここで、personとsizeを直接扱うことができます！
}

4.Propsのデフォルト値を設定する

Propsには通常の関数のように、デフォルト値を設定することができます。

これにより、コンポーネントの利用側がすべてのデータを指定することなく再利用することができるため、共通で値を決めておきたいときなどに便利です。

以下、具体例です。

interface Props = {
    person: string;
    size: number;
}

function Avatar({ person, size = 100}) {

}

これにより、親コンポーネントからsizeが渡されなかった場合でも、sizeにはデフォルトでnumber型の100が設定されます。

また、Propsのデフォルト値が利用される条件についてですが、何も渡さないかundefinedが渡された場合にのみ、デフォルト値が適用されます。

それ以外のnullや0、空文字列""などが渡された場合には、デフォルト値は適用されず、そのまま渡された値が使用される点に注意しましょう！

5.JSXでスプレッド構文を用いてPropsを横流しする

JSXでは、JavaScript（TypeScript）のスプレッド構文を使用して、オブジェクトのプロパティをコンポーネントに一括で渡すことができます。

以下、具体例です。

interface Props = {
    person: string;
    size: number;
}

function Profile(props: Props) {
    return (
        <div className="card">
            <Avatar {...props}/>
        </div>
    );
}

これにより、自身のPropsをそのまま子コンポーネントに渡すことができます。

使いどころとしては、ラッパーコンポーネントなどで、Propsをそのまま子コンポーネントに渡したい場合などに使用すると便利です！

6.JSXを"子"として渡す

<Card><Avatar/></Card>のように、JSXを子要素として渡す場合、Propsとして受け取る側では、childrenという特別な名前のPropsで受け取ります。

イメージとしては、枠組み（Cardコンポーネント）の中に、内容（Avatarコンポーネント）をはめ込むようなレイアウトになります。

以下、具体例です。

function Card({ children }: { children: React.ReactNode }) {
    return (
        <div className="card">
            {/* ここに好きなコンポーネントを配置できるようになります。 */}
            {children}
        </div>
    );
}

export default function App() {
    return (
        <Card>
            <Avatar 
                person={{
                    name: 'vanilla ice',
                    imageId: '1bX5QH6'
                }} 
                size={100} 
            />
        </Card>
    );
}

7.まとめ

Propsは、コンポーネント間でデータ（コンポーネントも含めて）をやり取りするための重要な仕組みです。

今まで明言してきませんでしたが、Propは読み取り専用（一般的にイミュータブルと呼ばれます） で、受取った"子"コンポーネント側でPropsの値を直接書き換えることはできません。

変更するためには、別の手段を用いる必要があるのですが、それについてはまた後日解説したいと思います！

8.参考

GitHubで編集を提案

Discussion