【React】React初心者がuseStateの基本を振り返ってみた

Posted at 2024-10-08

こんにちは。あがさんです！！

今回はReactでよく登場するuseStateについて解説していきます。

Reactって何？

Reactは、Facebook（現Meta）が開発したユーザーインターフェース (UI) を構築するためのJavaScriptライブラリです。主にシングルページアプリケーション (SPA) の開発で使用され、複雑なUIを効率的に管理するためのコンポーネントベースのアプローチを提供します。

useState

useStateは、ReactのHook (便利機能みたいなもの) の一つで、関数コンポーネントで状態（state）を管理するために使います。useStateをインポートし、コンポーネント内に定義することで、管理したい値の更新を手軽に行うことができます。これにより、ユーザーの操作に応じて動的にUIが変わるようなアプリケーションを簡単に作ることができます。

useState の特徴

実際にカウントアプリを作ってみました。

page.js


import { useState } from "react"; // React Hooksをインポート

export default function Home() {
  const [count, setCount] = useState(0); // トップレベルで定義する。
 //const [現在の状態の値, 状態を更新するための関数] = useState(状態の初期値);
  console.log(count) //コンソールでcountを確認
  return (
    <div className="flex justify-center items-center min-h-screen bg-blue-50">
      <div className="text-center p-8 bg-white shadow-lg rounded-lg">
        <h1 className="text-4xl font-bold mb-6 text-blue-600">
          Hello useState!!
        </h1>
        <div className="flex flex-col space-y-4 mt-12">
          <button
            onClick={() => setCount(count + 1)}
            // クリックされる度にsetCountが+1される
            className="px-6 py-2 bg-blue-500 text-white font-semibold rounded-md shadow hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400"
          >
            {count} 回クリックされました。
          </button>
        </div>
      </div>
    </div>
  );

下記がカウントアップ画面。初期値の０回からスタート

ボタンを押す毎にカウントアップされていきます。

useStateの特徴① 状態を更新する

useState フックで提供される setCount 関数を使って、状態を更新できます。この関数は呼び出されるとReactがその状態を再計算し、UIの再レンダリングが必要かどうかを判断します。今回のアプリはボタンにイベントハンドラーであるonClickを持たせて、クリックするたびsetCountが+1ずつ増えていくようになっています。

useStateの特徴② 再レンダリングを行う

useState を使って状態を更新すると、そのコンポーネントが再レンダリングされます。画面のリロードをせずにcountのカウント数を更新することが可能になります。

まとめ

いかがでしたでしょうか。
今まで学習動画に倣ってuseStateを使っていましたが、
基本的な仕組みが理解できていなかったと感じました。

useStateは他にも様々な記述方法や使い方があるようなので
手を動かしながら少しずつ身につけていきたいと思います。

また次回も頑張って投稿します。
最後まで見ていただきありがとうございました!!

~Qiitaの歴史がまた1ページ~