プロップと状態

プロップ(Prop)

定義

コンポーネントへの入力 - 上位コンポーネントから下位コンポーネントへデータを渡す仕組み

特徴

コンポーネントでは値の変更ができない

上位コンポーネントから値を受け取る

サンプルコード

 //複数のプロップスを使用する場合、プロップスを追加で記述するだけで動作する

関数コンポーネントにパラメータとして渡されたプロップオブジェクトを通じてプロップにアクセスできる
- サンプルコード
react //再利用不可function Func1(){ return
First Output
}//プロップを通じてデータをコンポーネントに伝達function Func2(data) { return
Hello, {data.name}
}

//複数のプロップの使用例 //プロップを通じてデータをコンポーネントに渡す function Func3(data) { return
Hello, {data.firstName} {data.lastName}
} ~~~ コンポーネントがレンダリングされる場合
Func1 コンポーネントは 'First Output' を
Func2 コンポーネントは 'Hello, Minseo',
Func3 コンポーネントは 'Hello, Minseo Kim' というテキストを表示する

状態(State)

定義

コンポーネント内で更新可能な値

使用方法

宣言

useState フック関数を使用して作成する- useState関数は初期値を引数として受け取り、最初の要素として名前を、2番目の引数として状態値を更新する関数を持つ配列を返す

react const [state, setState] = React.useState(初期値);

setState関数はコンポーネントの状態オブジェクトに更新を実行し、状態が変更されるとコンポーネントが再レンダリングされる- 注意）setState関数は非同期的に呼び出される- 例コード

react //初期値が30のageという状態変数を生成する const [age, setAge] = React.useState(30);

ReactでuseState関数をインポートする場合、Reactを省略して直接useState関数を使用できる

React // useState関数をインポートimport React, {useState} from 'react'

Reactを省略しても状態変数が動作するconst[age, setAge] = useState(30);

オブジェクトを利用して宣言も可能 - 例

react const [name, SetName] = useState({ firstName = 'Minseo', lastName = 'Kim' });

呼び出し

呼び出しは簡単に**{状態オブジェクトの名前}**を使用して可能である- サンプルコード

react関数 GetNameComp(){ const [age, SetAge] = React.useState(30); return

年齢 : {age}

;}

値の更新

状態を宣言する際に使用した状態更新関数を利用して値の変更が可能である- 更新関数(更新する値); の形で使用する- 注意) = を使用して直接状態を更新する場合、ReactがUIを再レンダリングしないため const 関数の再代入が不可能である- 例示コード

react setAge(25);

状態が複数ある場合、useState関数を複数回呼び出すことが可能 - 例

react //多重状態の宣言const [firstName, SetFirstName] = "Minseo";const [lastName, SetlastName] = "Kim";

//多重状態の呼び出しSetFirstName('Hojun');SetLastName('Shin');~~~

オブジェクトを用いて状態を宣言した場合、以下のように呼び出しが可能である

react setName({firstName: 'Hojun', lastName: 'Shin'});

これ以外にも部分的に更新が可能である - 部分的な更新にはスプレッドを利用する - スプレッドはES2018で導入されたオブジェクトスプレッド構文(...)を利用して動作する。 - 例示コード

react //nameという状態オブジェクトをコピーし、firstNameを'Hojun'に更新するSetName({... name, firstName : 'Hojun'});

プロップとの共通点と相違点

共通点

プロップと状態は、コンポーネントをレンダリングするための入力データであり、状態が変更されると再レンダリングされる

違い

状態の値はプロップの値とは異なり、コンポーネント内で更新が可能である- プロップはコンポーネントに渡されるが、状態はコンポーネント内部で管理される

参考資料

コンポーネント状態

実践！Spring BootとReactで始めるモダンWebアプリケーション開発.

エラーを見つけましたか？ GitHubで問題を報告

修正内容は寄稿者として記載されます。

誤字を見つけましたか？ ForkしてPRを送ってください。

プロップと状態