subtitle

RaiseTechの各種コースをはじめとしたイロイロな学習の記録

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

12月 05, 2021

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



フックとは何か？

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

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

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


ふむ。なるほど。

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

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


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


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


■関連サイト



インポート

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>
  );
}













Tags: