ReactHookの使い方

Reactとは、Javascriptのライブラリであり、ユーザーインターフェースを構築するためのものである。

その中でも大きな特徴であるReactHookの、代表的なものを紹介する。

ReactHookのイメージ
Reactのロゴ
ReactHookのイメージ2
JavaScriptのロゴ

ReactHookとは

ReactHookは、Reactの機能の一部で、関数コンポーネント内で状態管理や副作用の処理を行うためのAPI。
これにより、クラスコンポーネントを使用せずに、状態を持つコンポーネントを簡単に作成できる。

今回紹介するReactHook

useState

useStateは、コンポーネントの状態を管理するために使用される。
このフックを使用することで、関数コンポーネント内で状態を持つことができる。

コード例

useState.jsx 
      
function Example() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <p>今のカウントは{count}です。</p>
      <button onClick={() => setCount(count + 1)}>
        増加
      </button>
      <button onClick={() => setCount(count - 1)}>
        減少
      </button>
      <button onClick={() => setCount(0)}>
        リセット
      </button>
    </div>
  );
}

実行結果

このプログラムは、カウントの状態をuseStateで管理し、ボタンをクリックすることでカウントが増減するようになっている。

useEffect

useEffectは、コンポーネントの副作用を管理するために使用される。
これにより、タイマーの設定やデータの取得などのレンダリングの外部での処理を行うことができる。

コード例

useEffect.jsx 
          
function Example() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    document.title = `カウント: ${count}`;
  }, [count]);

  return (
    <div>
      <p>今のカウントは{count}です。</p>
      <button onClick={() => setCount(count + 1)}>
        増加
      </button>
      <button onClick={() => setCount(count - 1)}>
        減少
      </button>
      <button onClick={() => setCount(0)}>
        リセット
      </button>
    </div>
  );
}

実行結果

このプログラムは、useStateのプログラムに加えて、useEffectで現在のカウントをこのサイトのタイトル名にしている。

本コンテンツの制作時間: 6時間

本サイトのGitHubリポジトリ

ポートフォリオ