Reactの基本文法②～useState(ステートフック)の使い方～

今回はステートフックについて学習。

フックとは何か？

フックという言葉はよく聞くが、一体ナニモノなのか？

まずは、Wiki先生に聞いてみる。

フック（英: hook）は、プログラム中の特定の箇所に、利用者が独自の処理を追加できるようにする仕組みである。また、フックを利用して独自の処理を追加することを「フックする」という。
処理を追加できる箇所は、元のプログラムの開発者によって、あらかじめ決められている。

ふむ。なるほど。

Reactには、React独自のフックがいくつかあるが、その中でもステータスを扱うのが「useState」。

昔はstateを扱うときは、クラスに変換してなんたらかんたらしていたけど、React 16.8から、簡単にstateを扱うことができるステートフック(useState)ができたらしい。

まずは使ってみよう。(今回は、ボタンをクリックすると、クリックした回数がカウントアップして、クリックごとにクリック回数をどんどんリストにしていくよ！)

今回の出来上がりイメージはこんな感じ。

■関連サイト

• React Doc：フックAPIリファレンス - React

インポート

importして、useStateを使うよ！を主張。

import { useState } from 'react';

変数宣言

クリックされた回数をカウントしておく count変数と、その回数をリストにした配列 arr を宣言。

export default function App() {
  const [count, setCount] = useState(0);
  const [arr, setArr] = useState([]);

変数の一つ目は、ステータスなどの状態を持ったもので、2つ目はその変数を更新する関数。

useStateの引数に初期値を設定する。

constはクリックされた回数なので、初期値は0、配列はクリックされた回数をリストにしていくので、初期値は空にしておく。

変数(state)の参照

これはすごく簡単。そのまま、count と arr で読み出せばOK。

<h2>{count}</h2>
{arr.map((val) => (
  <h2 key={val}>{val}</h2>
))}

全体像はこんな感じ

import './styles.css';
import { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  const [arr, setArr] = useState([]);

  const handleCountUp = () => {
    const arrCount = count + 1;
    setCount(arrCount);
    const newArr = [...arr];
    newArr.push(arrCount);
    setArr(newArr);
  };
  const handleResetCount = () => {
    setCount(0);
    setArr([]);
  };

  return (
    <div id="App">
      <h1>React useState動作確認用</h1>
      <div id="use_state01">
        <h2>{count}</h2>
        <button onClick={handleCountUp}>
          ここをクリックするとカウントされます
        </button>
        <button onClick={handleResetCount}>カウンタリセット</button>
      </div>
      <div id="use_state02">
        <p>
          <br />
        </p>
        <p>クリックしてカウンタが更新されると配列が更新されます</p>
        {arr.map((val) => (
          <h2 key={val}>{val}</h2>
        ))}
      </div>
    </div>
  );
}