Reactの状態管理：useStateでコンポーネントを動的に変化させる
Reactでアプリケーションを開発していると、
「ユーザー操作に応じて画面を変化させたい」
という場面が必ず出てきます。
例えば、以下のような処理です。
- ボタンをクリックするとカウントが増える
- 入力フォームの内容をリアルタイムで表示する
- APIから取得したデータを画面に表示する
今回は、
状態管理（State Management）
を見ていきましょう。
Reactにおける状態管理とは？
Reactでは、コンポーネントが現在保持している値やデータのことを
State（状態）
と呼びます。
例えば以下のようなものがStateとして管理されます。
- カウント数
- 入力フォームの文字
- ログイン状態
- APIから取得したデータ
- 表示・非表示の状態
これらの値が変更されると、Reactは変更を検知し、
自動的に画面を再描画します。
状態変更による画面更新の流れ
例えばカウンターの場合、
現在のカウント：0
↓
ボタンをクリック
↓
現在のカウント：1
というように、状態の変化に合わせて表示内容が更新されます。
- ユーザーがボタンをクリックする
- Stateの値が変更される
- Reactが変更を検知する
- 最新の状態で画面を再描画する
状態管理で最も基本となるものが
useState
です。
JavaScriptの分割代入とは？
useStateを理解する前に、
JavaScriptの分割代入について簡単に確認しておきましょう。
分割代入とは、配列やオブジェクトから複数の値を一度に取り出す書き方のことです。
例えば、次のような配列があるとします。
const numbers = [10, 20];
通常は、配列の要素はインデックス番号によって取得しますよね。
const first = numbers[0];
const second = numbers[1];
console.log(first); // 10
console.log(second); // 20
しかし、分割代入を使うと次のように書くことができます。
const [first, second] = numbers;
console.log(first); // 10
console.log(second); // 20
配列の順番通りに、それぞれの変数へ値が代入されます。
この書き方がReactのuseStateでも利用されています。
useStateで状態を管理する
まず利用するためにインポートします。
import { useState } from "react";
次に、状態を管理する変数と、
その値を更新する関数を定義します。
const [count, setCount] = useState(0);
このコードでは以下の意味になります。
| 要素 | 役割 |
|---|---|
| count | 現在の状態を保持する変数 |
| setCount | countを更新するための関数 |
| 0 | 初期値 |
useStateは配列を返すため、
JavaScriptの分割代入を利用して、
状態変数と更新関数を取得しています。
useStateの命名ルール
useStateで利用する更新関数には、
Reactでよく使われる命名ルールがあります。
例えば以下の場合です。
const [name, setName] = useState("");
この場合、
- 状態を保持する変数 → name
- 状態を更新する関数 → setName
になります。
Reactでは、
状態変数名の先頭に「set」を付けた名前を更新関数にする
という書き方が一般的！
例えば以下のようになります。
const [count, setCount] = useState(0);
const [user, setUser] = useState(null);
const [isOpen, setIsOpen] = useState(false);
useStateを使ったカウンター実装
Counterコンポーネントを作成する
それでは、実際にuseStateを利用して、
簡単なカウンター機能を作成してみましょう。
これまでの記事では、componentsディレクトリを作成し、
コンポーネントを管理する方法を学びました。
今回も同じように、
componentsディレクトリ配下へ
Counter.tsxを作成します。
src
├── components
│ ├── Button.tsx
│ └── Counter.tsx ← 今回追加
└── App.tsx
今回は、このCounterコンポーネントの中で
useStateを利用し、
ボタンをクリックすると数字が増えていくカウンターを実装していきます。
Counter.tsxを実装する
まずは、Counter.tsxに次のコードを記述します。
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>
カウントアップ
</button>
</>
);
}
export default Counter;
このコンポーネントでは、
現在のカウント数をcountというStateで管理しています。
ボタンをクリックすると
setCount()が実行され、
Stateが更新される仕組みです。
Appコンポーネントから呼び出す
作成したCounterコンポーネントは、
Appコンポーネントから呼び出して利用します。
import Counter from "./components/Counter";
function App() {
return (
<>
<Counter />
</>
);
}
export default App;
これで画面上にカウンターが表示されます。
ボタンをクリックしたときに、React内部でどのような処理が行われているのかを見ていきましょう。
カウンター処理の流れ
- Counterコンポーネントが表示される
useState(0)によって初期値「0」が設定される- ユーザーが「カウントアップ」ボタンをクリックする
setCount(count + 1)が実行される- countの値が更新される
- Reactが変更を検知し、自動的に画面を再描画する
このように、useStateを利用すると、
ページを再読み込みすることなく、
Stateの変更に応じて画面を動的に更新できます。
管理人そーそー。が在籍中の会社は👉こちら👈
大好きな会社です☺️
エンジニア交流会もやってるので、気軽に遊びにきてください！
コメント