React Hookとは？

Reactにデフォルトで採用されている便利機能。 今回は最も使用頻度の高い「useState」と「useEffect」についてまとめた。

useStateの概要

useStateとはReactで変数を扱うときに使用するReact Hookである。 Reactで変数を扱う場合は他の言語のように「=」で値を代入するかたちではなく、このuseStateを用いることがほとんど。

useStateの使い方

useStateを使う場合は以下のような手順を踏む。

1. useStateをimport
2. コンポーネントのトップレベルでuseStateを呼び出して、state変数を宣言する
3. 宣言した変数を用いて値を取得したり、セットしたりする。

以下、サンプルコード

import { useState } from 'react';

function App() {
  const [input, setInput] = useState("");

  return (
    <>
      <div>
        <h1>{input}</h1>
      </div>
      <div>
        <input type="text" onInput={(e) => setInput(e.target.value)} />
      </div>
    </>
  );
}

export default App;

具体的な内容としてここでは...

1. テキストボックスに入力があるとonInputイベントが発生
2. onInputの中でsetInput関数が実行され変数inputに入力値(e.target.value)をセット
3. 入力値がセットされた変数inputをh1タグで表示

という手順でuseStateを使用している。

useEffectの概要

useEffectとはReact内で特定の値に動きがあった際に作用する副作用を設定するReact Hookである

useEffectの使い方

まずはサンプルコード(useStateのサンプルコードに追記したもの)

import { useState, useEffect } from 'react';

function App() {
  const [input, setInput] = useState("");

  useEffect(() => {
    console.log("入力");
  }, [input]);

  return (
    <>
      <div>
        <h1>{input}</h1>
      </div>
      <div>
        <input type="text" onInput={(e) => setInput(e.target.value)} />
      </div>
    </>
  );
}

export default App;

useStateと同様に1行目でimportした後、Appファンクション内でuseEffectを使用している。 useEffectは第2引数(配列)に指定したステータスに変化があると第1引数の関数が実行されるというもの。 ここでは変数inputが更新される(テキストボックスに入力がある)とuseEffect第1引数の関数が実行される(コンソールに「入力」と表示される)。 なお、画面表示時に1度だけ実行したい場合は第2引数を空配列にする。