React学習ログ #5｜画面の更新

前回：React学習ログ #4｜イベントハンドラ

画面の更新

チュートリアルリンク

ボタンがクリックされた回数を保持する

ReactからuseStateをインポートします

import { useState } from 'react';

上記を記述することで、コンポーネント内にstate変数を宣言できます

function MyButton() {
  const [count, setCount] = useState(0);

useStateは

• 現在のstate(count)
• 更新するための関数(setCount)

を得られます。

インスタンス変数 + 再描画をまとめたものみたいな理解をしました。

普通の変数との違いは、値が変わったら、画面が自動で再描画されるという点です。

公式によると命名に関して、慣習的には[something, setSomething]のように記述するとのことです。

初期値はuseState()に定義した値となります。
上記のコードではuseState(0);としているので、初期値は0となっています。

countの値を変更したい時はsetCount()を呼び出して、新しく値をセットします。

コメントを付け足したサンプルコードはこちらです。

function MyButton() {
  // useStateを使用して、count(現在の値を保持する変数)とsetCount(更新するための関数)を定義する
  // 初期値は0に設定
  const [count, setCount] = useState(0);

  // 現在の値(count)に1を加えるコンポーネント
  function handleClick() {
    setCount(count + 1);
  }

  return (
    // ボタンのonClickにhandleClickを設定する
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

これを実際に画面上で動かしてみます。

src/App.jsx

import { useState } from 'react';

export default function MyApp() {
  return (
    <div>
      <h1>Counters that update separately</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

実際の挙動がこちら

ボタンをクリックするたびに対象のボタン内の数字が1ずつ増えていっています👏

次回

フックについて深掘りして学びます。