ReactのState

useState()とは

useStateとは状態(state)を管理するということ。

まずuseStateを使うには、

reactからuseStateという関数を呼び出すために以下を書きます。

import { useState } from "react";

useStateは配列を返却する関数で、状態(state)とstateの更新関数を分割代入で受け取ります。

const [num, setNum] = useState();

更新関数の名前はset+state名とつけます。

例えば、stateをnumにしたら、更新関数はsetNumになります。

初期値はuseState()のかっこの中に設定できます。

const [num, setNum] = useState(0);

ルール

useStateを使うには、関数コンポーネントの一番上に定義するのがルールです。

import { useState } from "react";

export const App = () => {
  const [num, setNum] = useState(0);//一番上ここです。
  const onClickClickCountUp = () => {
    setNum((prev) => prev + 1);
  };
  return (
    <>
      <button onClick={onClickClickCountUp}>カウントアップ</button>
      <p>{num}</p>
    </>
  );
};