【React】propsとstateを学ぼう！

はじめに

これからReactを始めたい！始めたいけど何から学べばいいか分からないという方に向けた記事となります。
今回は、Reactを学ぶ時に必ずと言っていいほど通る道であるpropsとstateについて説明していこうと思います。

コンポーネント

propsやstateを説明する前に最低限理解しておいてもらいたいものがあります。それは、コンポーネントです。
コンポーネントとは、画面に表示される部品のことです。この言葉だけでは分からないと思いますので実際にコードを書いていきましょう。
今回はボタンを例で考えていきます。
App.jsに以下のコードを書いて下さい。
App.js

function Button() {
  return(
    <button>ボタン</button>
  );
}

function App() {
  return (
    <>
      <Button />
    </>
  );
}

export default App;

するとこのようにボタンができると思います。

この部分がコンポーネントになります。

function Button() {
  return(
    <button>ボタン</button>
  );
}

このように記述すると呼び出すことが可能になります。

<Button />

これは部品ですので以下のように何個も呼び出すことも可能になります。

function Button() {
  return(
    <button>ボタン</button>
  );
}

function App() {
  return (
    <>
      <Button />
      <Button />
      <Button />
      <Button />
    </>
  );
}

export default App;

props

一言で表すとコンポーネントに値を渡す仕組みです。
この言葉だけでは何の利点があるのかよく分かりませんね。
コードで見てみましょう。
先程のコードを以下のように変えてみて下さい。

function Button(props) {
  return(
    <button>{props.name}</button>
  )
}

function App() {
  return (
    <>
      <Button name='登録'/>
      <Button name='確認'/>
      <Button name='編集'/>
      <Button name='ヌマクロー'/>
    </>
  );
}

export default App;

すると、こんな感じになります。

先程は全て「ボタン」という名前でしたがご覧の通り変わっています。つまり利点は、パーツを共通化して変えたい部分だけpropsで値を渡して自由にカスタマイズができることになります。
ではもう少し詳しくみていきましょう！
まずこちらでnameという名前でコンポーネントに値を送っています。

<Button name='登録'/>

こちらでpropsの中に入っているnameを取り出すという意味でprops.nameと記述してあげることで表示することが可能になっています。

function Button(props) {
  return(
    <button>{props.name}</button>
  )
}

state

stateとはクラスコンポーネント内で情報を保有することができるオブジェクトのことです。
stateは後から値を変更することができます！
全てがそうではありませんが、イメージとしてはそのページ内のみで値を保有することができるオブジェクトです。
ではコードで見ていきましょう！
App.jsを以下に変更して下さい。
App.js

import React from 'react';

export default class App extends React.Component {
  // stateの初期値設定
  state = { count: 0 }

  handleClick = () => {
    this.setState({
      count: this.state.count + 1
    });
  }

  render() {
    return (
      <>
        <div>{this.state.count}</div>
        <button onClick={this.handleClick}>Click</button>
      </>
    );
  }
}

するとこのような動きになります。

ではもう少し詳しくみていきましょう！
まずここでstateの初期設定をしています。
今回の場合はcountに0を設定してます。

// stateの初期値設定
state = { count: 0 }

ここでthis.state.countで先程セットしたcountを表示しています。

<div>{this.state.count}</div>

handleClick内にあるthis.setStateがstateを理解する上で非常に重要で、stateの値を更新する場合はsetStateを使用します。
これによりボタンを押される度countの中が+1増え、this.state.countが変化するようになります。

handleClick = () => {
    this.setState({
      count: this.state.count + 1
    });
  }

<button onClick={this.handleClick}>Click</button>

さいごに

そこまで分かりやすい説明ではないかと思いますが、アウトプット用に書かせていただきました。
Reactを触ったことない人もこれを機に触ってみてはいかがでしょうか。
読んでいただきありがとうございました。