【React】propsとstateについて

はじめに

　本記事は、プログラミングの学習を始めて1ヶ月の初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

propsとstateについて

propsとは

propsとは親コンポーネントから子コンポーネントに渡すことができる属性値です。
具体的には以下のように使用します。

.js

import React from 'react';

// 親コンポーネントであるApp.jsに以下のように記述
const App = () => {
  return <Greeting name="Taro"/>
}


// 子コンポーネントであるGreeting.jsに以下のように記述
const Greeting = (props) => {
  return <div>Hi!{props.name}</div>
}

export default App;

上記の例では、親コンポーネントであるAppにおいてGreetingを使用しています。
Appに記述されているGreetingに対してname="Taro"という値を設定し、設定した値を子コンポーネントであるGreetingにおいて{props.name}と記述することで受け取っています。
結果、画面上にはHi!Taroと表示されます。

propsの値は変更不可です。
値を変更する場合には親コンポーネントにstateを設定しsetStateで変更する必要があります。

stateとは

stateとはコンポーネントの内部で状態を管理する変数です。
クラスコンポーネントでのみ利用可能でしたが、現在はuseStateを使うことで関数コンポーネントでも使用することができます。
以下は、クラスコンポーネントでの使用例です。
useStateの使用例は【React】React Hooksについてをご参照ください。

.js

// 親コンポーネントであるCounter.jsに以下のように記述
class Counter extends React.Component {
  // stateの設定
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  // stateの値の変更
  handlePlusButton = () => {
    console.log('click')
    this.setState({count: this.state.count + 1});
  }

  render() {
    // propsの設定
    return <CounterBox count={this.state.count} counterPlus={() => this.handlePlusButton()}/>
  }
}

// 子コンポーネントであるCounterBox.jsに以下のように記述
const CounterBox = (props) => {
  return (
    <div>
      {/* propsの受け取り */}
      <div>counfsaast: { props.count }</div>
      <button onClick={()=> props.counterPlus()}>Click</button>
    </div>
  )
}

export default Counter;

値を変更したい場合には、上記の例のように親コンポーネントにおいてstateを設定し、setStateを用い値を変更する記述をし、変更した値をpropsとして子コンポーネントに受け渡せるように設定します。
その後、子コンポーネントでpropsを受け取ることで、値を変更した上で表示することができます。

まとめ

• propsは親コンポーネントから子コンポーネントに渡すことができる属性値
• propsの値は変更不可。親コンポーネントにstateを設定する必要がある。
• stateはコンポーネントの内部で状態を管理する変数
• setStateを使用し、stateの値を変更する。