- useStateとは何か
- useStateの使い方
- useStateを使ったシンプルな例
React Hookを学ぶにあたって、まず一番最初に理解すべきなのがuseStateです。
この記事ではReactのuseStateがよく分かっていない人に向けて、シンプルな例を使ってuseStateの使い方を解説しています。
ぜひ参考にしてみてください！
ReactのuseStateとは
ReactのuseStateとは、関数コンポーネントでstateを管理するためのReactフックです。
例えば、inputで入力した文字をコンポーネント内で保持したい場合などにuseStateが役に立ちます。
クラスを書かずに関数コンポーネントでも、クラスコンポーネントのstateと同じことが出来るよ！
ちょっと難しいわ…
実際に使いながら理解していこう！
ReactのuseStateの使い方
useStateを利用するには、useStateをimportしなければいけません。
import React, { useState } from 'react';次にコンポーネント内で状態管理を行いたい変数をuseStateで宣言します。
useStateを宣言する型は以下の通りです。
const [変数, メソッド] = useState(初期値);今回は参考例としてcountという変数とsetCountというメソッド。初期値は0としてみます。
const [count, setCount] = useState(0);初期値がいらない場合は初期値の部分は空にしてね！
上記のような設定を行うことで、コンポーネント内で{ count }を記入するだけでcountの現在値を表示させることが出来ます。
import React, { useState } from 'react';
const Test = () => {
const [count, SetCount] = useState(0);
return (
<>
<h1>現在の値は{ count }です</h1>
</>
);
}
export default Test;上記のようなコードを書いてみると以下の画像のような画面が出来上がります。
countの値を更新する
ちなみにuseStateの宣言時に書いたsetCountメソッドっていつ使うの？
countの値を更新したい時に利用するよ！
useStateを宣言した時に定義したメソッドは変数の値を変更したい時に利用します。
値を変更する際の基本の型は以下の通りです。
メソッド(処理させたい内容);例えば、ボタンを押すと１を足したり、引いたりする機能を実際に作ってみます。
import React, { useState } from 'react';
const Test = () => {
const [count, setCount] = useState(0);
const increment = () =>{
setCount(count + 1);
};
coust decrement = () => {
setCount(count - 1);
}
return (
<>
<h1>現在の値は{ count }です</h1>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</>
);
}
export default Test;上記のコードを実行すると以下のような画面が出来ます。
なるほど！useStateをこうやって使えば、値の変更や保持が簡単に出来るのね！
理解が出来てよかったよ！
まとめ
今回はReactのuseStateについてシンプルな例を通して解説しました。
useStateを利用すれば、関数コンポーネント内で値を保持したり、変更したり出来る変数を作成することが出来ます。
利用方法もコンポーネント内でuseStateをインポートと定義するだけで簡単なので、ぜひuseStateを使いこなしてみてください！
コメント
Thanks!