【React】State(useState)の使い方 #React

はじめに

こんにちは！プログラミング初学者です。
現在学習中のReactで重要な概念のStateについてまとめてみました。

Stateとは

コンポーネント内で管理されるローカルなデータの状態を表します。
コンポーネントが持つ動的な情報や状態を保持するために使用されます。
Stateが変更されると、React は自動的にコンポーネントを再レンダリングして、新しい状態を反映します。
Stateは主にコンポーネント内で使用され、コンポーネントの見た目や動作を制御するために利用されます。

Webアプリを作る場合、様々な状態(state)を画面は持っています。

エラーがあるかどうか
ボタンを押せるか
ユーザーがモーダルウィンドウを開いたか閉じたかどうか
ログインしているかどうか、またはログインフォームが表示されているかどうか

このような状態は全てStateで管理し、イベント実行時等に更新処理を行うことでアプリケーションを実行していきます。

useState

React Hooksと総称される機能郡の中の一つのこと。

宣言: React関数コンポーネント内で状態を管理するために使用されます。 useStateを使用して状態を宣言すると、React コンポーネント内で変更可能な状態を管理するための変数が作成されます。この変数には、現在の状態の値が含まれます。
初期化: useStateが返す第二の要素は、状態を更新するための関数です。この関数を呼び出すことで、状態の値を変更することができます。
更新: 状態の更新は非同期的であり、React は自動的にコンポーネントを再レンダリングして、更新された状態を画面に反映します。

useStateの基本的な使用例

import React, { useState } from 'react';

function ExampleComponent() {
  // 状態の宣言と初期化
  const [count, setCount] = useState(0);

  // ボタンがクリックされたときのハンドラー関数
  const handleClick = () => {
    // 状態の更新
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

export default ExampleComponent;

↓この場合、countが状態を持った変数、setCountがそれを更新する関数となります。

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

名称は自由につけることができますが、暗黙のルールで変数がcountであれば更新関数名はsetCountのようにします。

おわりに

useStateについて理解しきれていなかったので、調べながらまとめてみましたが、改めてコードの意味を理解することができ良い学習になりました。