【React】State(useState)

Stateとは

Stateとは、コンポーネント単位で状態を管理するもので、以前まではクラスコンポーネントでのみ使用できましたが、現在はReact HooksのuseStateを使用することで関数コンポーネントでもState管理することができるようになりました。
管理できるものとしては、文字列、数値、真偽値、配列、オブジェクトetc...になります。

Propsとの比較としては、Propsは親コンポーネントから子コンポーネントに値を渡すので内部が変更できないのに対し、Stateは親子関係なく、それぞれのコンポーネントが独立しているので内部を変更することが可能になります。
→ Propsが曖昧な方はこちらへ

※ここからはuseStateを使用して内容を進めていきます。

useStateの使い方

今回は以下のようなボタン押下時にカウントアップする機能を簡単に実装していきます。

useStateを使用するには以下のようにHooksをインポートします。

import

import { useState } from "react";

useState関数の返却値は以下のように配列の形で、1つ目にState変数、2つ目にそのStateを更新するための関数が設定されます。以下の場合、countがState変数、setCountがそのStateを更新するための関数になります。
※今回はuseState関数の初期値は0とします。

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

以下のようにuseStateを関数として使いやすいように定義し、jsxでイベントとして実装します。
ボタン押下時にsetCount関数でStateの値を+1しているという処理になります。

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

return (
    <>
        <p>Count: {count}</p>
        <button onClick={onCountUp}>ボタン</button>
    </>
);

　

※余談になりますが、上記のsetCount(count + 1);の書き方は厳密にはあまりよくはありません。Stateを更新する時は以下のようにsetCount関数内で更に関数を指定することを推奨します。()に関数を書くと、その関数の引数に更新直前のStateの値が渡されるので、その値に1を足すことで同じことが実現できます。

setCount((prev) => prev + 1);

なぜこのこの書き方を推奨するのかは他の方の記事で詳しく記載されているのでそちらを参照下さい。（引用するに当たって許可を取っていないので問題があれば削除します。）
→ 【React】そろそろ技術ブログで setCount(count + 1) と書くのはやめませんか

最後に

ここまで読んでくれてありがとうございます！今回は自分なりのメモ、アウトプットの一環としてState(useState)の概要的な簡単なことを書いたので、応用についてはまた別途でまとめようと思います。他にもReactの記事を出しているので良かったらそちらもご覧ください。