【React】useState useEffect 使い方 - SREエンジニアの備忘録

概要
準備
構文/関数を使ってみる
作成できるもの
まとめ
1. 関連

概要

Reactの学習において、アプリケーションを作成することがより実践的で良いとはよく言われることです。

しかし、基本的な構文を知らずして作ることはできないのでこちらでいくつか動かしてみようと思います。

今回扱うのは簡単なTODOリストを作成する際に使用するような構文、関数を提示していきます。

準備

実際にローカルで動くプロジェクトを作成します。

任意のディレクトリでこちらのコマンドを順番に叩いてください。

// React の開発に必要な基本的な設定を含むプロジェクト構造を作成
$ npx create-react-app hoghogeApp

// 作成したプロジェクトに移動する
$ cd hoghogeApp

// 開発サーバーを起動し、ブラウザで React アプリケーションを開く
$ npm start

または、下記リンクからSandboxを開いて簡易的に動作環境を準備します。

https://codesandbox.io/p/sandbox/react-new

構文/関数を使ってみる

UseState

React のフック（Hooks）の一つで、関数コンポーネント内で状態（state）を持つために使用されます。

これを使うと、関数コンポーネント内で状態の追加や更新が可能になります。(ボタンを使って等)

fuction.jsx
----------------------------------

import { useState } from 'react';

export const function = () => {
  const [num, setNum] = useState(22);
return (
    <>
      <p>{num}</p>
    </>
  );
};

UseStateに持たせた値を表示することができ、このような表示になります。

UseState x カウントボタンの実装

UseStateで保持している値をボタンで更新することができます。

fuction.jsx
----------------------------------

import { useState } from 'react';

export const function = () => {
  const [num, setNum] = useState(22);
  const onClickCountUp = () => {
    setNum((prev) => prev + 1);
  };
return (
    <>
      <button onClick={onClickCountUp}>カウントアップ</button>
      <p>{num}</p>
    </>
  );
};

ボタンを押した時に、useStateに保持している値に+1をするように実装しています。このような表示になります。

UseEffect

React のフック（Hooks）の一つで、関数コンポーネント内で副作用（side effects）を扱うために使用されます。

useEffectは、コンポーネントがレンダリングされた後に何かを実行したい場合に便利です。

カウントが3の倍数になった場合に顔文字を表示するようにしてみます。

fuction.jsx
----------------------------------

import { useEffect, useState } from "react";

export const function = () => {
  const [num, setNum] = useState(22);
  const [isShowFace, setIsShowFace] = useState(false);
  const onClickCountUp = () => {
    setNum((prev) => prev + 1);
  };
  const onClickToggle = () => {
    setIsShowFace(!isShowFace);
  };

  useEffect(() => {
    if (num > 0) {
      if (num % 3 === 0) {
        isShowFace || setIsShowFace(true);
      } else {
        isShowFace && setIsShowFace(false);
      }
    }
  }, [num]);

return (
    <>
      <button onClick={onClickCountUp}>カウントアップ</button>
      <p>{num}</p>
      <button onClick={onClickToggle}>on/off</button>
      {isShowFace && <p>(@_@)</p>}
    </>
  );
};

このソースコードで、以下のような表示になります。

1枚目：カウント０のため表示なし。

2枚目：カウント3のため表示あり。

styleをjsxの中に記載

cssにstyleを記述していくことが通例ですが、jsxにも記述できます。

jsxにstyleを書くことのメリットとして、同じファイルにソースコードとstyleが書いてあることで管理がしやすくなります。

実際に書いてみるとこのようになります。

fuction.jsx
----------------------------------

import { useEffect, useState } from "react";

const styleCount = {
  fontSize: "50px",
  color: "green",
};
export const function = () => {
  const [num, setNum] = useState(22);
  const [isShowFace, setIsShowFace] = useState(false);
  const onClickCountUp = () => {
    setNum((prev) => prev + 1);
  };
  const onClickToggle = () => {
    setIsShowFace(!isShowFace);
  };

  useEffect(() => {
    if (num > 0) {
      if (num % 3 === 0) {
        isShowFace || setIsShowFace(true);
      } else {
        isShowFace && setIsShowFace(false);
      }
    }
  }, [num]);

return (
    <>
      <button onClick={onClickCountUp}>カウントアップ</button>
      <p style={{ color: "red" }}>{num}</p>
      <p style={styleCount}>{num}</p>
      <button onClick={onClickToggle}>on/off</button>
      {isShowFace && <p>(@_@)</p>}
    </>
  );
};

表示はこのようになります。