stateについて
Reactのstate(ステート)は、コンポーネントの現在の状態を保持するために使用されるデータ。
Reactのコンポーネントは関数またはクラスの形で書くことができる。どちらの場合でもstateを使ってデータを管理できる。
※関数コンポーネントは、useStateフックを使用してstateを管理する。React 16.8で導入された機能。
関数コンポーネントの書き方について
※今回は関数コンポーネントについて整理する。
import React, { useState } from 'react';
function MyComponent() {
const [count, setCount] = useState(0); // 初期stateを設定
const incrementCount = () => {
setCount(count + 1);
};
return (
<div>
<p>{count}</p>
<button onClick={incrementCount}>Increment</button>
</div>
);
}
この例では、useStateフックを使用。
countという名前のstate変数を作成し、それを更新するための関数setCountを作成している。
useStateの引数には、stateの初期値(この場合は0)を渡している。
ボタンがクリックされると、incrementCount関数が呼び出され、setCountを通じてcountの値が更新される。