[React #02] イベントハンドリングと状態管理の基本

1. はじめに

前回の記事「React #01: 基本のコンポーネントとJSX」では、ReactのコンポーネントとJSX構文を学びました。

今回は、Reactアプリケーションの インタラクティブな部分 に必要不可欠な イベントハンドリング と 状態管理 について掘り下げていきます。

これらを理解することで、アプリケーションの動的な部分を作成できるようになります。

[React] Reactの基本 - コンポーネントとJSX

このシリーズでは、ReactのコンポーネントとJSXの使い方に焦点を当て、UI開発の効率化を目指します。Reactの基本的な要素を理解し、最初のReactコンポーネントを作成する方法を学びましょう。

/posts/react-01-basics-components-jsx/

2. イベントハンドリング

React では、ユーザーの操作（ボタンクリックやフォーム入力など）に応じて動作を処理するために、イベントハンドラを使用します。

Reactでは、HTMLのイベント属性（例：onclick）ではなく、JSXで提供されるキャメルケース形式のプロパティ（例：onClick）を使用します。

2.1. ボタンクリックの処理

以下の例では、ボタンがクリックされるとカウントを増加させる処理を実装します。

import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  // ボタンがクリックされるとカウントアップ
  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default Counter;

onClick={handleClick}: ボタンがクリックされると handleClick 関数が実行され、状態（count）が更新されます。

2.2. 入力フィールドの操作

onChange イベントを使って、テキスト入力の値を管理する方法も見ていきましょう。

import React, { useState } from "react";

const NameInput = () => {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);  // 入力された値を更新
  };

  return (
    <div>
      <input type="text" value={name} onChange={handleChange} />
      <p>Entered name: {name}</p>
    </div>
  );
};

export default NameInput;

onChange={handleChange}: ユーザーが入力を変更するたびに状態（name）が更新され、画面が再レンダリングされます。

2.3. イベントハンドラの注意点

アロー関数の使用: onClick や onChange に直接関数を渡す際、アロー関数（() => {}）を使うことで、this の挙動を気にせずに処理を簡単に書けます。
パフォーマンスの最適化: イベントハンドラの中で無駄な処理を避けるため、状態が変更されるタイミングや頻度に気をつけましょう。

3. 状態管理の基本

React では、コンポーネント内で 状態（state） を管理することができます。useState フックを使って状態を管理し、状態が変化するとそのコンポーネントが再レンダリングされます。

3.1. useState フックの使い方

useState は、初期値を渡して状態を作成し、その状態を更新するための関数を返します。

import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);  // countが状態、setCountが状態更新関数

  const increment = () => {
    setCount(count + 1);  // 状態を変更して再レンダリング
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

const [count, setCount] = useState(0);: count が現在の状態、setCount が状態を更新するための関数です。
setCount(count + 1): 状態が変更されると、Reactはそのコンポーネントを再レンダリングします。

3.2. 複数の状態を管理する方法

状態が複数ある場合、複数の useState フックを使って管理します。例えば、ユーザー情報を管理する場合です。

import React, { useState } from "react";

const UserInfo = () => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  const handleChange = (e) => {
    const { name, value } = e.target;
    if (name === "name") {
      setName(value);
    } else {
      setEmail(value);
    }
  };

  return (
    <div>
      <input
        type="text"
        name="name"
        value={name}
        onChange={handleChange}
        placeholder="Name"
      />
      <input
        type="email"
        name="email"
        value={email}
        onChange={handleChange}
        placeholder="Email"
      />
      <p>Name: {name}</p>
      <p>Email: {email}</p>
    </div>
  );
};

export default UserInfo;

setName と setEmail を使ってそれぞれの入力フィールドの状態を更新しています。

3.3. 状態管理と UI の再レンダリング

状態が変更されると、Reactはそのコンポーネントを再レンダリングします。

これにより、最新の状態が反映されたUIが表示されます。

4. 複雑な状態管理と useReducer

状態が複雑になる場合、useState ではなく useReducer を使って状態管理を行うことがあります。useReducer は、複雑な状態遷移を管理するのに便利です。

import React, { useReducer } from "react";

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: "increment" })}>Increment</button>
      <button onClick={() => dispatch({ type: "decrement" })}>Decrement</button>
    </div>
  );
};

export default Counter;

useReducer は、状態とアクション（dispatch）を管理する方法です。reducer 関数内で状態の変更を処理します。

5. まとめ

イベントハンドリング: onClick や onChange を使って、ユーザーの操作を React の状態に反映させます。
状態管理の基本: useState を使って、コンポーネント内の状態を管理します。状態が変更されると、React は自動的に再レンダリングします。
状態の変更に伴うUIの更新: React では、状態管理がUIの更新を管理します。状態を変更することで、コンポーネントが再描画されます。
複雑な状態管理: useReducer を使うことで、複雑な状態遷移を管理することができます。

過去記事

[React #03] コンポーネントのネストとデータの流れ

Reactにおけるコンポーネントのネスト構造、親から子へのデータの渡し方（Props）、子から親へのイベント通信方法（Callback関数）、複数のコンポーネントで状態を共有する方法（Context API）について深く学びます。

https://humanxai.info/posts/react-03-components-nesting-data-flow/

[React #01] Reactの基本 - コンポーネントとJSX

https://humanxai.info/posts/react-01-basics-components-jsx/

1. はじめに#

[React] Reactの基本 - コンポーネントとJSX

2. イベントハンドリング#

2.1. ボタンクリックの処理#

2.2. 入力フィールドの操作#

2.3. イベントハンドラの注意点#

3. 状態管理の基本#

3.1. useState フックの使い方#

3.2. 複数の状態を管理する方法#

3.3. 状態管理と UI の再レンダリング#

4. 複雑な状態管理 と useReducer#

5. まとめ#

過去記事#