React Hooks + TypeScriptによるUseEffect(Cleanup)の使い方

2022年3月13日 23:00

はじめに

React Hooks + TypeScriptによる基礎学習の UseEffect(Cleanup) のアウトプットになります。
タイマー、カウント、リセットなどの機能を実装する。
前回学習したReact Hooks + TypeScriptによるUseEffect(条件付き)の続きからになります。

学習に使用した教材・参考資料

ゴール

以下のようにカウントが実行され、ボタンを押すとリセットされ、再度ボタンを押すとカウントが開始される仕組みを作る。

学習手順

1. componentsフォルダにTimerContainer.tsxとTimer.tsxを作る
2. タイマーやカウントの機能を実装する
3. 動作確認

ファイル構造

# react-sample-app -> react-ts-app -> src

src
├── App.css
├── App.test.tsx
├── App.tsx
├── components
│   ├── Hello1.tsx
│   ├── Hello2.tsx
│   ├── BasicUseEffect.tsx
│   ├── Timer.tsx              <-- 作成
│   └── TimerContainer.tsx　　　　　　　　　<-- 作成　　
├── index.css
├── index.tsx
├── logo.svg
├── react-app-env.d.ts
├── reportWebVitals.ts
└── setupTests.ts

1. componentsフォルダにTimerContainer.tsxとTimer.tsxを作る

まずは、TimerContainer.tsxとTimer.tsxをcomponentsフォルダに新規作成して、以下のようにテンプレートにするコードを記述する。
vscodeだと[rafce]と入力すると補完機能が効いて以下のコードを補完してくれる。

# TimerContainer.tsx


import React from 'react'

const TimerContainer = () => {
  return (
    <div>
        
    </div>
  )
}

export default TimerContainer

# Timer.tsx

import React from 'react'

const Timer = () => {
  return (
    <div>
     
    </div>
  )
}

export default Timer

２. 機能を実装する

機能が実行される流れは、App.tsx -> TimerContainer.tsx -> Timer.tsx の流れで機能が実行される。

App.tsx

App.tsxにTimerContainer をインポートする。

# App.tsx


import React from 'react';
import logo from './logo.svg';
import './App.css';
// import Basic2 from './components/Hello2';
// import BasicUseEffect from './components/BasicUseEffect';　　　　//<-- コメントアウト
import TimerContainer from './components/TimerContainer';     //<-- インポート


function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        {/* <Hello2  /> */}
        {/* <BasicUseEffect /> */}　//<-- コメントアウト
        <TimerContainer />　　　　　　　　　　　　　//<-- 埋め込む
      </header>
    </div>
  );
}

export default App;

TimerContainer.tsx

タイマーを実装するので、機能としてはボタンを押すとタイマーがリセット又は再起動するようにする。
{ display && <Timer /> } は論理積でタイマーのボタンの切り替えをする。
<Timer />は基本的にはTrueであり、displayがボタンを押すことでTrue/Falseの切り替えをする、それにより、カウントが始まったり、リセットされたりする。Timer.tsxのuseEffect()にて機能が実行される。

# TimerContainer.tsx


import React, {useState}　from 'react'
import Timer from './Timer'　　//<-- インポートする

const TimerContainer = () => {

  const [display, setDisplay] = useState(true)

  return (
    <div>
        <button onClick={()=>setDisplay(!display)}>Switch Timer</button>
        { display && <Timer /> }
    </div>
  )
}

export default TimerContainer

Timer.tsx

タイマーを作る。
まず、[useState]と[useEffect]をインポートする
useState関数に[count]と[setCount]を実装する、そして初期値は[0]にする。
time関数を作成し、これが呼び出された時に[1]追加される仕組みを作る。
useEffect関数を実装する、タイマーを呼び出すのは最初の1回だけにするので、第二引数に[]を入れておく、それからカウントが1秒に一回呼び出されてtime関数を実行するようになるので[time, 1000]とする。
タイマーを削除リセットする為に、clearInterval(interval)　を記入し、実行を確認する為のconsole.log("cleared")を記述する。
ボタンの下に現在のカウントの値を表示させる為に{count}を実装。

# Timer.tsx


import React, {useState, useEffect} from 'react'　　　　　//<-- インポートする


const Timer = () => {

  const [count, setCount] = useState(0)

  const time = () => {　　　　　　　　　　　　　　　　　　　　　　// <-- time関数1秒に1回実行される
    setCount(prevCount => prevCount+1)
  }

  useEffect(() => {　　　　　　　　　　　　　　　　　　　　　　　　　
    const interval = setInterval(time, 1000)　　　　　　　　　　　　// <-- time関数を1秒づつ呼び出している
    return () => {　　　　　　　　　　　　　　　　　　　　// <-- 論理積によりdisplayがFalseになると実行される　　　　
        clearInterval(interval)
        console.log("cleared")
    }
  }, [])

  return (
    <div>
      {count}
    </div>
  )
}

export default Timer

3. 動作確認

localhost:3000に接続し以下のように表示され、タイマーがカウントされて、ボタンを押すとコンソールに[cleared]と表示動作が確認できれば問題なし。
再び、ボタンを押すとカウントが始まる。

おわりに

useEffect(Cleanup)の学習でした。
次回はAPIデータ取得(axios + fetch)です。