Chapter 12. stateの使用

今日、データを動的に変更したい場合は、使用するstateについて説明します.

1. state vs props

共通点

オブジェクトは、適用コンポーネントのレンダリング成果物に影響します.

差異
props:異なるコンポーネント間でデータを渡すときに使用するオブジェクト
state:1つの構成部品内でデータを動的に管理するためのオブジェクト

2.stateの使用

stateの構成部品での使用方法は次のとおりです.

state = {
	변수명:값,
	변수명:값,
	변수명:값,
}

コードで直接使用する例を見てみましょう.
プラス記号(+)/マイナス記号(-)ボタンがあり、2つのボタンを押すたびにstateと宣言されたage値が増加し、値が表示される画面を作成します.
では、上のページを作成するためにアプリケーションを先にjsをtestに変更します.以下に示します.jsをインポートするために修正しましょう

App.js

今テストします.jsにプラス記号(+)、マイナス記号(-)ボタンを作成し、押下時にプラス記号関数とマイナス記号関数を呼び出すように変更します.

Test.js

前述したように、変更後にページを表示すると、以下の画面とボタンを押すとコンソールが撮影されるのがわかります.

しかし、値はまだ変更されていないため、数字は変更されません.

3.setStateの使用（状態変数値の変更）

stateとして宣言された変数については、setState関数を使用して値を変更する必要があります.
では、どのように使われているのか、以下で確認してみましょう.

Test.js

正の関数、負の関数が変化しました.
this.setState:state値を変更するための関数
stateVal: this.setState関数でstateを宣言する変数名(ユーザーランダム処理)
age:stateVal.age+1:state宣言のage値の既存値+1処理
age:stateVal.age-1:stateが宣言したage値の既存値-1処理
前述のように処理後、結果ページを再度開き、ボタンを押すと以下のことが確認できます.

結果ページ

クリックするたびにログがあり、値が変わることを確認できるはずです.

4.終了

今日,stateによって1つの素子内で変数値を動的に管理する方法を学習した.
ボタンイベントの変化値を確認すると、反応に近い感じがします.
完全なソースGitリンク
https://github.com/cho876/React/tree/master/chapter12