🫶
React Hook解説<useState編>
第二弾お待たせいたしました（え。誰も待ってないって？）
今回はuseStateについて詳しく見ていきたいと思います。
とは言っても、ReactHookの中で一番面識があるんじゃないかな？この子
多分、一番理解しやすいし、使いやすい便利なやつですよね。
なのでサクッと説明を終わらせたいと思います✋
何ができるの？
ズバリ、ページの中で値を保持することができます。
通常、関数が終わってしまうと変数というものは初期化されてしまうものですが、useStateを使用することによってページ内で値を保持しながら、それを更新したりすることができます。
以下が使用例です。tsに精通していない人も読めるようにその辺も少し解説します！！！
count.ts
import React, { useState } from 'react';
const Count: React.FC = () => {
const [count, setCount] = useState<number>(0);// ①
return (
<div>
<p>You clicked {count} times</p>// ②
<button onClick={() => setCount(count + 1)}> //③
Click me
</button>
</div>
);
}
①
ここでcountとsetCountという変数（箱）を用意してあげます。
なぜにこんな書き方をするかというと、分割代入とか言ったりするらしいです。
詳しくはこちら
名前は何でもOKです！※const [hoge, setHoge] = useState<string>('')でも可
useStateとすることによって、状態としてこのページ内でデータを保持することになります。
countとsetCountは同時に宣言される必要があり、後ろのsetCountを用いてcountの値が更新されます。
<number>となっている箇所はユニオン型と言って、どちらかの型がこのcountに入ってくることを意味しています。
②
countを使用したいときは、reactの変数のように使用できるのでこのように使用できます。
③
Buttonがクリックされた際にsetCountで値を更新しています。
ちなみに、この処理が長くなってくると煩雑なので別の関数として切り出してあげよう！！！
最後に
ゼル伝の新作楽しみだね。
（諸事情により、発売してから4ヶ月後にプレイ解禁される）
参考文献
筆者
Discussion