【React】useState の使い方をわかりやすく解説！
こんにちは！駆け出しエンジニアのガッキー（@ExplorerZine）です。
今回は React で頻出な useState について書いてみたいと思います！
サーバーサイドエンジニアである僕にとって React の基礎はまだまだ学ぶことがたくさん！
今回も一緒に学んでいきましょう～
useState とは？
useState は React のフック（Hook）の一つであり、状態（state）を管理するために使用されます。
状態とは、React コンポーネント内で変化する値やデータのことです。
useState を使うことで、コンポーネントの状態を保持し、状態の変化に応じてコンポーネントが再レンダリングされるようにすることができます。
Hook とは？
Hook とは React が用意する関数のことです。
- useState
- useEffect
- useContext
上記は一部ですが React にはさらに多くのフックが存在します。
useState の使い方
それでは useState の使いかたを見ていきましょう！
まずは useState をインポートします！
import { useState } from "react";次に、useState を使って状態を定義します。状態を定義するには、変数とその初期値を設定します。
const [count, setCount] = useState(0);
const [変数（state）, 関数] = useState(初期値);- count は状態の値を保持する変数です。初期値として 0 が与えられています。
- setCount は count の値を更新するための関数です。
count 変数を使って現在の状態の値にアクセスし、setCount 関数を使って状態の値を更新することができます。
import { useState } from "react";
const App = () => {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<p>ボタンが押された回数は {count}</p>
<button onClick={increment}>加算</button>
</div>
);
};
export default App;useState の具体例を見ていきたいと思います。
この例では、count という状態変数を useState を使って宣言しています。
count は数値を保持し、初期値として 0 が設定されています。
ボタンがクリックされると、increment 関数の setCount 関数が実行され count の値を増加させます。
そして、p タグのなかで画面にレンダリングされて表示されます。
画面ではこんな感じでボタンを押下するたび加算されていきます。
useState を使って配列に値を追加する
import React, { useState } from "react";
function ArrayExample() {
const [items, setItems] = useState([]);
const addItem = () => {
// 新しいアイテムを生成し、現在の配列に追加する
const newItem = `Item ${items.length + 1}`;
setItems([...items, newItem]);
};
return (
<div>
<button onClick={addItem}>Add Item</button>
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
);
}
export default ArrayExample;続いて useState を使って配列に値を追加してみましょう！
この例では、items という配列を管理するために useState を使用しています。
const [items, setItems] = useState([]); の部分で
items は現在の配列の値を保持する変数、setItems は配列の値を更新するための関数です。
初期値として空の配列 [] が与えられています。
ボタンをクリックして呼び出される addItem 関数のなかでは、
newItem という変数を作成し、「アイテム」という文字列に、
現在の配列 items の要素数に 1 を足した値が追加されます。
setItems([...items, newItem]);そして setItems 関数のなかでは
[...items, newItem]このようにスプレッド構文を使って、現在の配列 items を展開し、
新しいアイテム newItem を配列の末尾に追加しています。
スプレッド構文は、JavaScript の機能の一つで、オブジェクトや配列などに値を追加するために使用されますよ！
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>最後にこの部分で map 関数を使って、変数 items をひとつひとつ取り出して、
リストとして表示させていきます。
map 関数はこちらの記事でも解説していますのでよかったら覗いてみてください！
画面ではこのような形で表示されていますね。
まとめ
いかがでしたか？？
ReactのuseStateについてご紹介してきました！
引き続きブログをお楽しみいただければ嬉しいです。
よかったらTwitterも（@ExplorerZine）みてくださいね♪
これからも一緒に学習しましょう～
