【React】useStateについて

はじめに

備忘録がてら、Reactの基礎であるuseStateについて書いていきます。

useStateとは

useStateは、Reactフレームワークで提供されるフック（Hook）の一つです。useStateフックを使うことで、Reactコンポーネント内で状態（state）を管理することができます。

状態（state）は、コンポーネントが持つデータのことであり、コンポーネント内の変数のようなものです。状態の値が変化すると、Reactは自動的にコンポーネントを再レンダリングしてUIを更新します。

サンプルコード

このコードで解説していきます。

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [count, setCount] = useState(0);
  const countUp = () => {
    setCount(count + 1);
  };

  return (
    <div className="App">
      <p>{count}</p>
      <button onClick={countUp}>カウントアップ</button>
    </div>
  );
}

解説

まずは、以下のコードでuseStateを定義します。

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

[]内のcountはこの関数の中で使われる変数のようなイメージです。
[]内のsetCountはcountの状態を変化させるための関数です。
useState(0)は、[]内のcountの初期値を設定しています。

const countUp = () => {
    setCount(count + 1);
  };

この関数で、[]内のsetCount関数を呼び出して、count変数を変化させています。
そして、以下のコードでボタンを押した時に、countUp()を呼び出しています。

<p>{count}</p>
<button onClick={countUp}>カウントアップ</button>

以上のコードで、ボタンを押すたびに、画面が再レンダリングされ、{count}の変数が1ずつカウントアップしていくはずです。

最後に

他にも記事を書いているので、よければご覧ください。