今日やったこと

• 「モダンJavaScriptの基本から始める React実践の教科書」 P112〜119
  • 4-5 Props
    • Propsを扱うテクニック
  • 4-6 State(useState)

学習メモ

Propsを扱うテクニック

• オブジェクトの分割代入と省略記法を使う

1. 何度も props.~ のように記述するのは面倒なので、分割代入して省略する

export const ColoredMessage = (props) => {

    // Props を分割代入
    const { color, children } = props;

    const contentStyle = {
        color: color, // props.が不要
        fontSize: "20px"
    };

    // ↓props.が不要
    return <p style={contentStyle}>{children}</p>
};

2. props. が不要になったことで color のプロパティ名と設定値が同一になったので、オブジェクトの省略記法のルールに則って短く書くことができる

	// …省略
    const contentStyle = {
        color, // 省略記法が使える
        fontSize: "20px"
    };
	// …省略

引数の段階で展開するパターンもある

export const ColoredMessage = ({ color, children }) => {

    const contentStyle = {
        color,
        fontSize: "20px"
    };

    return <p style={contentStyle}>{children}</p>
};

Propsをdestructureする？？

• あえて分割代入をしないという選択肢もある
  • props.~と書いてあることで「あ、Propsから渡ってきた値なんだな」と気付けるメリットがある
• 技術記事などで見かける「Propsをdestructureする」のような文章は、分割代入するという意味
  • 分割代入が Destructuring assignment と英訳されることからこのような表現になる

State(useState)

• React開発では画面に表示するデータや、可変の状態をすべて State として管理していく
• Stateとは、コンポーネントの状態を表す値のこと
  • エラーがあるか、モーダルウィンドウを開いているか、ボタンを押せるか、テキストボックスに何を入力したかなど

useState

• 現在主流となっている関数コンポーネントでは React Hooks と総称される機能郡の中の useState という関数を用いてStateを扱っていく
• useStateはReactの中に用意されているので、使用する場合は以下のようにimportする

import { useState }  from "react";

• useState関数の返却値は配列の形で1つ目にState変数、2つ目にそのStateを更新するための関数が設定される

useStateの使用例

const [num, setNum] = useState();

この場合、numが状態を持った変数、setNumがそれを更新する関数となる
useStateは関数なので使用するときは()をつけて関数を実行する

• 名称は自由につけることができるが、暗黙のルールとして上記のように変数名がnumであれば更新関数名はsetNumのようにする

State変数に初期値を設定したいケースでは、 useState関数を実行する再に引数を指定する

const [num, setNum] = useState();

例：ボタンを押すと数字がカウントアップする機能の実装

• setNum(num + 1)のように実装したが、厳密には正しくない
  • 今のStateの値に基づいてStateを更新するときは、set関数内で関数を指定すると良い

例：set関数内で関数を指定

setNum((prev) => prev + 1);

カッコ内に関数を書くと、その関数の引数に「更新直前のそのStateの値」が渡されるため、その値に1を足すことで同じことが実現できる

所感

Props と State について学びました。もっと手を動かして慣れていきたいです。
次回は再レンダリングと副作用について学びます。