ReactのuseStateフックの使い方

まず、ReactコンポーネントでuseStateフックを使用するには、以下のようにuseState関数をインポートします。

import React, { useState } from 'react';

次に、useStateフックを使用して状態を作成します。以下の例では、カウンターの状態を管理します。

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(count - 1)}>-1</button>
    </div>
  );
}

上記の例では、useStateフックを使用してcountとsetCountの2つの変数を作成しています。countは現在のカウントの値を保持し、setCountは新しい値を設定するための関数です。初期値は0です。

カウンターの値を増やすためには、setCount関数を使用し、現在の値に1を加えます。同様に、値を減らすためには、setCount関数を使用し、現在の値から1を引きます。

このように、useStateフックを使用することで、Reactコンポーネント内で状態を管理し、簡単に更新することができます。

さらに、useStateフックはオブジェクトや配列などの複雑なデータ構造を管理することもできます。以下に、配列を管理する例を示します。

function TodoList() {
  const [todos, setTodos] = useState([]);
  const addTodo = (text) => {
    setTodos([...todos, text]);
  };
  return (
    <div>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
      <input type="text" onChange={(e) => addTodo(e.target.value)} />
    </div>
  );
}

上記の例では、useStateフックを使用してtodosとsetTodosの2つの変数を作成しています。todosは現在のTodoリストを保持し、setTodosは新しいTodoリストを設定するための関数です。初期値は空の配列です。

addTodo関数は、新しいTodoを追加するために使用されます。setTodos関数を使用して、現在のTodoリストに新しいTodoを追加します。

以上がReactのuseStateフックの使い方とコード例です。useStateフックは、Reactコンポーネントで状態を管理するための強力なツールであり、コンポーネントの再レンダリングや状態の更新を簡単に実現することができます。