本記事では、ReactのuseStateの基本的な使い方について解説しています。
- JavaScriptの基礎から始めてReactの機能を一通り学べる
- 実務で必要となる知識を意識しながら学習を進められる
- 現場のシチュエーションベースのストーリーで技術解説
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
useStateの使い方
下記のコードはuseStateを使って、ボタンをクリックすると1ずつインクリメントされた数値が表示されるプログラムです。
import { useState } from "react";
function App() {
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);
return (
<>
<p>カウンター：{count}</p>
<button onClick={increment}>+1</button>
</>
);
}
export default App;ここで注目してほしいポイントは、「import { useState } from “react”;」「const [count, setCount] = useState(0);」「setCount(count + 1);」の3つです。それぞれ詳しく見ていきましょう。
import { useState } from “react”;
import { useState } from "react";useStateはreact機能の一つなのでimportをしないと使用することは出来ません。もし、importせずにuseStateを使用すると「Uncaught ReferenceError: useState is not defined」とエラーが表示されます。
const [count, setCount] = useState(0);
const [count, setCount] = useState(0);上記のコードを説明しやすいよう更に分解します。
useState(0);useStateの引数には初期値を設定することが出来ます。上記のコードでは数値をインクリメントさせるため0を指定していますが、文字列やBoolean(true/false)なども値も指定することが出来ます。もし、初期値を指定しなかった場合はundefinedがセットされます。
[count, setCount]これは配列の分割代入です。useStateは配列の0番目に初期値で設定した値を、配列の1番目に0番目に代入されている値を更新する時に必要な関数を返します。
サンプルコードの場合、変数countには初期値で設定した0が代入され、変数setCountには変数countの値を更新する時に必要な関数が代入されています。
setCount(count + 1);
setCount(count + 1);このコードでは変数countの値に1を足しています。通常のJavaScriptでは「count = count + 1」「count++」などで数値を足しますが、useStateで渡された変数の値を更新する時は必ず分割代入の2つ目に渡された関数を使用します。
