Reactは、ユーザーインターフェースを構築するための非常に人気のあるライブラリで、その中でもuseStateは状態管理の基本的なフックです。useStateを使うことで、コンポーネント内の状態を簡単に管理し、状態に基づいた動的なUIを構築することができます。
本記事では、useStateの基本から実際の使い方、応用例までを詳しく解説します。
useStateとは？
useStateは、Reactの関数コンポーネントで状態を管理するためのフックです。クラスコンポーネントでは、this.stateを使って状態を管理していましたが、useStateを使うことで関数コンポーネントでも簡単に状態を持つことができます！
基本的な構文
useStateを使うには、まずReactからインポートします。
import React, { useState } from 'react';次に、useStateを呼び出し、初期値を設定します。以下は基本的な使用法です。
const [count, setCount] = useState(0);
ここで、countは現在の状態を表し、setCountはその状態を更新するための関数です。useStateに渡した初期値（ここでは0）は、コンポーネントが最初にレンダリングされるときの状態となります。
状態の更新
状態を更新する際には、setCount関数を使います。たとえば、ボタンをクリックしたときにカウントを増やす場合は、以下のようにします。
import React, { useState } from 'react';
function Hello() {
// useStateを使ってカウントの状態を管理
const [count, setCount] = useState(0);
return (
<div>
<h1>カウント: {count}</h1>
{/* ボタンをクリックするとカウントが増える */}
<button onClick={() => setCount(count + 1)}>増やす</button>
</div>
);
}
export default Hello;
このHelloコンポーネントを表示し、ボタンをクリックすると回数が増えます！
親コンポーネントの状態を子コンポーネントで更新
App.js
import React, { useState } from 'react';
import Hello from './Hello';
function App() {
// useStateを使ってカウントの状態を管理
const [count, setCount] = useState(0);
return (
<div>
<h1>親コンポーネントのカウント: {count}</h1>
{/* 子コンポーネントにカウントとsetCountを渡す */}
<Hello count={count} setCount={setCount} />
</div>
);
}
export default App;
Hello.js
import React, { useState } from 'react';
function Hello({ count, setCount }){
const [count_c, setCount_c] = useState(0)
return (
<div>
<h2>子コンポーネントのカウント: {count_c}</h2>
{/* ボタンをクリックすると親のカウントが増える */}
<button onClick={() => setCount(count + 1)}>親のカウントを増やす</button>
<button onClick={() => setCount_c(count_c + 1)}>子のカウントを増やす</button>
</div>
);
}
export default Hello;
これで親の状態とこの状態をどちらも子コンポーネントで管理することができました！親からuseStateで定義した状態（count）とそのセッター（setCount）を渡してしまえば、あとは好きに更新するだけ！
まとめ
useStateは、Reactの関数コンポーネントで状態を管理するための基本的なフックであり、直感的で使いやすいことが特徴です。初期値を設定し、状態を更新する方法を理解することで、Reactのコンポーネントをより動的にし、ユーザーインターフェースを構築することができます。useStateを効果的に活用することで、Reactアプリケーションの品質を向上させることができるでしょう。
コメント