こんにちはフロントエンドエンジニアのまさにょんです！
今回は、Reactのstateとpropsの違いやポイントについて解説していきます。
目次
stateとは何か？
useState の説明に入る前に useState で取り扱う state が React にとって、どんな存在なのか理解する必要があるので、まずは state の説明をします。
簡単に言えば、state は1つのReactコンポーネント内で「状態」を管理している値です。
state はコンポーネント内部だけのプライベートな変数(ローカル変数)で、コンポーネント内で保持・更新する値です。
つまり、コンポーネント内部のみのスコープで管理・使用するローカルな値です。
propsとは何か？ stateとpropsの違いは？
props は、親コンポーネントから子コンポーネントに渡される値です。
ちなみに、propsはプロパティ(Propaties)の略称です。
また、propsは、小道具という意味の英単語でもあります。
props は、stateと同様にコンポーネントに関する情報を保持します。
ただ一番の違いとして、state は1つのコンポーネント内部のスコープ内で使うプライベートな値だったのに対して、
propsは別コンポーネントに渡すグローバルな値です。
別のコンポーネントから値をもらって使いたい場合は、props を使用することになります。
ReactのDocにもstateとpropsの違いは、ローカルな値かグローバルな値かが、重要な違いとして挙げられています。
stateとpropsの違いは何ですか？
props（“properties” を短くしたもの）とstateは、両方ともプレーンな JavaScript のオブジェクトです。どちらもレンダー結果に影響を及ぼす情報を持ってはいますが、ある重要な一点が異なっています。
propsは（関数引数のように）コンポーネントへ渡されるのに対し、引用元: コンポーネントの state
stateは（関数内で宣言された変数のように）コンポーネントの内部で制御されます。
また、上記に記述のないpropsの注意点として、
受け取る側のコンポーネントで変更することはできないという点があります。
propsの値は、必ず送信する側のコンポーネントで決定する必要があるということです。
つまり、propsの状態管理(作成・更新)は、あくまでpropsを作成する側にあります。
props VS state
続いて、props と state の違いをより明確にするために『props vs state』からわかりやすい比較表を引用します。
| Changing props and state | props | state |
|---|---|---|
| Can get initial value from parent Component? (翻訳: 親コンポーネントから初期値を取得できますか？) | Yes | Yes |
| Can be changed by parent Component? (翻訳: 親コンポーネントで変更できますか？) | Yes | No |
| Can set default values inside Component? (翻訳: コンポーネント内にデフォルト値を設定できますか？) | Yes | Yes |
| Can change inside Component? (翻訳: コンポーネント内で変更できますか？) | No | Yes |
| Can set initial value for child Components? (翻訳: 子コンポーネントの初期値を設定できますか？) | Yes | Yes |
| Can change in child Components? (翻訳: 子コンポーネントで変更できますか？) | Yes | No |
注目してもらいたいのは、
state は 「親コンポーネントで変更できますか？」と「子コンポーネントで変更できますか？」が No であることと、
props は「コンポーネント内で変更できますか？」が No であることです。
state は、先述のとおり特定のコンポーネントが独自に保持するローカル変数なので、もちろん親や子コンポーネントで変更などはできません。
props は、先述のとおり送信する側のコンポーネントで値の状態管理(作成・更新)する必要があるため、受信したコンポーネント内では、変更はできません。
まとめ
- state はコンポーネント内部だけのプライベートな変数(ローカル変数)
- propsは別コンポーネントに渡すグローバルな変数
- propsの状態管理(作成・更新)は、propsを作成する側にある。
- propsを受信するコンポーネントでは、値の変更はしない。
Twitterやってます！Follow Me！
神聖グンマー帝国の逆襲🔥
神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ！！！！！
React関連の書籍
プログラミング学習・エンジニア転職関連の情報
自宅で現役エンジニアから学べる『TechAcademy』 (エンジニア転職保証)
『GEEK JOBキャンプ』スピード転職コース（無料）
【IT道場】入校時0円！ 就職目的プログラミングスクール
エンジニア転職なら100％「自社開発」求人に強い【クラウドリンク】
『techgym』 (Python特化・無料)
参考・引用
最近の投稿
【SQL】1回のINSERTで、複数行のレコードを一括挿入・一括追加する方法
JavaScriptでランダムなuuidを作成する方法(randomUUIDの使い方)
PythonでCSVをJSONに変換する方法
PythonでCSV・Dataframeを指定の行数まで切り取る方法
JavaScript(TypeScirpt)のfor-of文でindexの値も取得する方法と、Type IterableIteratorエラーの解決方法
VSCode上のPython import文の「インポート “XXXXX” をソースから解決できませんでした」エラーの解決方法
