ReactでのイベントリスナーとuseEffectの使用方法

イベントリスナーは、特定のイベントが発生した場合に実行される関数です。Reactでは、イベントリスナーを追加するためにaddEventListenerメソッドを使うのではなく、JSX内で直接イベントハンドラーを設定します。以下は、ボタンをクリックしたときにメッセージを表示する例です。

import React from 'react';
function MyComponent() {
  const handleClick = () => {
    console.log('ボタンがクリックされました');
  };
  return (
    <button onClick={handleClick}>クリック</button>
  );
}

上記の例では、onClick属性を使用してhandleClick関数をイベントハンドラーとして指定しています。

次に、useEffectフックについて説明します。useEffectは、コンポーネントのライフサイクルにフックして、副作用を実行するために使用されます。以下は、コンポーネントがマウントされたときにメッセージを表示し、アンマウントされたときにクリーンアップする例です。

import React, { useEffect } from 'react';
function MyComponent() {
  useEffect(() => {
    console.log('コンポーネントがマウントされました');
    return () => {
      console.log('コンポーネントがアンマウントされました');
    };
  }, []);
  return (
    <div>コンポーネントの内容</div>
  );
}

上記の例では、useEffectの第1引数に副作用の関数を指定し、第2引数に空の配列を渡しています。これにより、副作用はコンポーネントのマウント時にのみ実行され、アンマウント時にクリーンアップされます。

以上がReactでのイベントリスナーとuseEffectの使用方法の基本的な解説です。これらの機能を組み合わせることで、Reactコンポーネントの動作を柔軟に制御することができます。