React propsとstate

PropsとState

propsとstateはコンポーネントのデータの管理方法であり，コンポーネント間でのデータの受け渡しなどで使われる．
それぞれを簡単に説明すると以下のようになる．
State：コンポーネント内で管理されるプライベートな値
Props：別コンポーネントに渡すグローバルな値

Props

Propsは親コンポーネントから子コンポーネントにデータを受け渡すために使用するオブジェクト．親コンポーネント内で使われている子コンポーネントに属性を設定することによって，propsとして子コンポーネントに値を渡すことができる．

Propsの使い方

親コンポーネント

const ParentComponent = () => {
	const name = 'John';
	
	return (
		<div>
			<ChildComponent name={name} age={30} message="Hello"/>
		</div>
	);
}

親コンポーネントで使用している子コンポーネントの属性値として指定することでデータを受け渡す．
プロパティ名は自由，受け渡す値が変数や数値は中括弧{}，文字列はダブルクォーテーション””で渡す．

子コンポーネント

const ChildConponent = (props) => {
	return(
		<div>
			<p>Name: {props.name}</p>
			<p>Age: {props.age}</p>
			<p>Message: {props.message}</p>
		</div>
	);
}

子コンポーネントは，propsオブジェクトを引数として受けとり，親コンポーネントで指定したプロパティを受け取る．

propsを使用してデータを渡す場合，データは一方通行である．つまり，親コンポーネントから子コンポーネントにデータを渡すことができても，子コンポーネントから親コンポーネントに直接データを渡すことはできない．

State

Stateは，コンポーネントの状態を管理するために使用するデータを指す．これを利用することで，ユーザのアクションや外部からのデータの変更に応じて，コンポーネントの表示を動的に変化させることができる．propsは代入後の変更が不可能であるのに対して，Stateは代入後の変更が可能という違いがある．

Stateの特徴として，Stateが更新されると自動で再レンダリングを行う．これはStateの更新がトリガーとなって再レンダリングを行うメソッドを呼ぶからである．stateはクラスコンポーネントを使う場合と関数コンポーネントを使う場合で異なる使い方をするため，それぞれについて説明する．

Stateの使い方

クラスコンポーネント

class TextInput extends React.Component {
	//初期化
	constructor(props){
		super(props);
		this.state = {
			text: 'hello'
		};
	}

	handleChange(event) {
		this.setState({ text: event.target.value });
	}	

	render(){
		return(
			<div>
				<input 
						type="text" 
						value={this.state.text}
						onChange={(event) => this.handleChange(event)}
				/>
				<p>入力されたテキスト：{this.state.text}</p>
			</div>
		);
	}
}

２．コンポーネントの初期状態の設定
→コンポーネントが初めてレンダリングされる場合，constructorメソッド内でthis.stateを初期化する．

２．Stateの更新
→this.handleChangeを呼び出し，this.setStateメソッドによってstateを更新する．
handleChangeはonChange(つまり，入力フィールドの値が変更したとき)によって呼び出される

︎関数コンポーネント

import React, { useState } from 'react';

function TextInput() {
  const [text, setText] = useState('Hello');

  const handleChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={handleChange}
      />
      <p>入力されたテキスト: {text}</p>
    </div>
  );
}

関数コンポーネントでは，Hooks(フックス)というものを利用して，stateの管理と更新を行う．

• const [text, setText] = useState('Hello')
  useStateフックを使用して，初期値がHelloのtextというstate変数と，そのstate変数を更新するための関数setTextを宣言する．
• handleChange
  handleChange関数は入力フォームが変更されたときに呼び出される関数で，その中では，state変数を変更する処理を行っている．useStateで宣言したstate変数を変更する関数を利用することで，一緒に宣言したstate変数の値を変更する．

Hooksに関しては，別の記事にまとめた．