【React】Hooksについてカウントアプリを作成して学ぶ

ReactはHooksの扱い方が重要だと感じた。 Railsからweb開発に入っている為、状態管理についてイメージしにくいため、学んだことを記事化する。

React Hooksとは？

version 16.8から新たに追加されたAPI。 Hooksを利用することで、関数コンポーネント(functional component)においても状態管理を行うことができる。

状態管理はカウントアプリを想像すると理解しやすい。 ボタンをクリックすると、数値が1ずつ上がっていく。 Hooksの中の機能の一つである、useStateを利用することで容易に作成できる。

以下がカウントアプリのコード例(component)。

import { React, useState, Fragment } from "react";

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

  const countUp = () => {
    setCount(count + 1);
  };

  const countDown = () => {
    setCount(count - 1);
  };
  const countReset = () => {
    setCount(0);
  };

  return (
    <Fragment>
      <h1>{count}</h1>
      <button onClick={countUp}> + </button>
      <button onClick={countDown}> - </button>
      <button onClick={countReset}> RESET </button>
    </Fragment>
  );
};

export default Caluclator;

FunctionalComponent, アロー関数で書いている。

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

これにより、count, setCount共に初期値は0と明示的に宣言している。 ちなみに、count はカウント数、setCountはカウント数を更新する関数だ。

なぜ引数を2つ(count, setCount)入れているかというと、useStateにおいては、state,stateを更新する関数をペアにするからだ。 つまり、今回のアプリではstate=count, stateを更新する関数=setCountとなる。

  const countUp = () => {
    setCount(count + 1);
  };

  const countDown = () => {
    setCount(count - 1);
  };
  const countReset = () => {
    setCount(0);
  };

こちらはカウントアップ(+)、カウントダウン(-)、カウントリセット(RESET)の関数。 setCountの引数にcount+1, count-1と入れることで、現在のcountの数値からそれぞれプラス、マイナスされる。 countResetではsetCount(0)とすることで、強制的に0に戻す。

  return (
    <Fragment>
      <h1>{count}</h1>
      <button onClick={countUp}> + </button>
      <button onClick={countDown}> - </button>
      <button onClick={countReset}> RESET </button>
    </Fragment>
  );

こちらのコードはreturnにより返却されるモノ。 countUp, countDown, countResetを呼び出し、ボタンを表示させる。

以上がHooksを利用したカウントアプリが完成した。

小ネタ：コード末尾のexport文を消す？

上記コード例では、末尾で

export default Caluclator

と、exportしているが、これは消すことができる。

const Caluclator = () => {
...

を、

export default function Caluclator {
...

と、予め宣言することで、末尾にexportを書く必要がなくなる。