はじめに
2022月10月にデータアナリストからwebエンジニアにジョブチェンジした者です。
案件でreactに触れる機会があったのでその際に学んだことをアウトプットしていければと思います。
目次
useStateとは
状態を扱うための※フックで、これを使用することでコンポーネントが内部状態を持ってその状態変化に応じて表示を変更することができます。
使用する際には下記の書き方をします。
const [状態, 更新関数] = useState(初期状態)
※フック: 関数コンポーネント中で状態やライフサイクルを扱うための機能
useStateの使用例
サンプルコード
import { useState } from "react";
export const Counter = () => {
const [count, setCount] = useState(1);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count - 1)}>-</button>
<button onClick={() => setCount(count + 1}>+</button>
</div>
);
};
export default Counter;
表示
説明
初期表示するカウントは1としています。
カウント表示の下に+ボタンと-ボタンが設置されており、クリックされた時にそれぞれにStateを更新する関数が実行されるように設定しています。
<button onClick={() => setCount(count - 1)}>-</button>
<button onClick={() => setCount(count - 1)}>-</button>
処理としては、現在のcountに対して1を足すか引くかです。
このsetCount関数が呼ばれてcountが更新されると、再描画が発生して画面も変化します。
+ボタンを押すと、現在の表示から1が足された値に、ーボタンを押すと現在の表示から1が引かれた値が表示されます。
このようにuseStateを使えば簡単にボタン等を押したときに表示が変わる処理を実行するができます！