useStateの基本の書き方

概要

今回はReact hooks の種類の一つである useState の基本的な使い方についてまとめた記事になります。
useStateが使われるシーンとして、Reactでアプリケーションを開発する際に、動きをつけたい場合に使われる事が多いです。

例えばカウントアップ アプリだと数値を変動させたいときに使用されます。
（todoアプリの作成の際にタスクを追加・削除することがある。この際にuseStateが用いらます）

hooksを使う上での注意点

1 条件分岐 等で呼び出さないこと
　　→hooksは最初に呼び出す必要がある。

2 クラスコンポーネントではhooksは使えない
　　→関数コンポーネントで使用しましょう。

useStateの書き方

カウントアップ（ボタンを押すと+1ずつカウントされていく処理）を例にuseStateの解説を1行ずつしていきます。

下記のコードは完成形のコードになります。

import React, { useState } from "react";

const Counter: React.FC = () => { 
  const [count, setConst] = useState(0);
  return <button onClick={() => setConst(count + 1)}>{count}</button>;
};

export default Counter;

1行目↓
useStateを使用する際は、useStateのimportを下記の様に行う必要があります。

import React, { useState } from "react";

2行目↓
「const 関数名: React.FC = () => { 」
const の後にくる文字列を任意で決め、関数として使用します。（下記のコードでいうCounter）

const Counter: React.FC = () => { 

3行目↓
・「count」は変数で任意の文字列で定義することができます。
・「setCount」は任意で定義したcountにsetをつけた関数になります。
　（setCountはcountを更新して行くための関数）
・「useState(0);」では初期値を設定します。
　　（今回の場合だとカウントアップする前に画面に表示される数値は「0」なので0と書いています）

const [count, setConst] = useState(0);

4行目↓
・「return」の中で書いたコードがブラウザに反映さらます。
　　（htmlでいるbodyタグと同じ役割）
・「onClick={() => ()}」をbuttonタグの中に書くことで、そのボタンを押した時に処理が発火します。
・「setConst(count + 1)」の処理の内容として、count変数に+1ずつしていき、それをsetCountの値として更新していっています。
・「{count}」ではブラウザにカウントアップしていく数値を表示しています。

 return <button onClick={() => setConst(count + 1)}>{count}</button>;

5行目↓
・「export default Counter;」はコード最終行に
　「export default 2行目で宣言した関数名;」をつける必要があります。

export default Counter;

まとめ

今回はReact hooks の種類の一つである useState について学びました。

hooksの中では１番使われる事が多いです。
今後のアプリ作成で動きを作る際に参考にしていただけると幸いです。