Reactでリスナーを追加する方法

クラスコンポーネントでのリスナーの追加:

クラスコンポーネントでは、イベントリスナーをcomponentDidMountメソッド内で追加することが一般的です。以下は、クリックイベントのリスナーを追加する例です。

import React from 'react';
class MyComponent extends React.Component {
  componentDidMount() {
    document.addEventListener('click', this.handleClick);
  }
  componentWillUnmount() {
    document.removeEventListener('click', this.handleClick);
  }
  handleClick = (event) => {
    // クリックイベントの処理
  }
  render() {
    return <div>My Component</div>;
  }
}

componentDidMountメソッドでaddEventListenerを使用してイベントリスナーを追加し、componentWillUnmountメソッドでremoveEventListenerを使用してリスナーを削除しています。リスナーのコールバック関数はアロー関数で定義されており、thisのバインディングを自動的に行うため、イベントハンドラ内でのthisの問題を回避することができます。

関数コンポーネントでのリスナーの追加:

関数コンポーネントでは、ReactのuseEffectフックを使用してリスナーを追加することができます。以下は、クリックイベントのリスナーを追加する例です。

import React, { useEffect } from 'react';
function MyComponent() {
  useEffect(() => {
    const handleClick = (event) => {
      // クリックイベントの処理
    };
    document.addEventListener('click', handleClick);
    return () => {
      document.removeEventListener('click', handleClick);
    };
  }, []);
  return <div>My Component</div>;
}

useEffectフックのコールバック関数内で、リスナーを追加し、返されるクリーンアップ関数内でリスナーを削除しています。空の依存配列（[]）を第2引数として渡すことで、コンポーネントのマウント時にのみリスナーが追加され、アンマウント時にのみリスナーが削除されるようにしています。

以上がReactでリスナーを追加するためのいくつかの方法とコード例です。適宜、コンポーネントの種類やイベントの種類に合わせて選択してください。