JavaScript

【React】副作用hooks（useEffect）を利用して計算結果を出力する

自分用のメモ

Contents

環境の準備

実行環境

  • VS code：v1.62.3
  • Node.js：v14.17.3
  • React：v17.0.2

プロジェクトの作成

React Create Appで作成します。

関連記事【React】Create React Appでプロジェクトを作成する

React Create Appで作成されたソースの変更

  • 15行目でbootstrapをCDNで読み込んでいます。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
    name="description"
    content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous" >
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
  • 33行目でonChangeすると、12、19、22行目のuseEffectが実行されます。
  • 17行目のsetMsgがあるため、useEffectの無限ループにならないように、18行目でtax1とtax2に変更があった場合だけ実行されるようにしています。
import React, {useEffect, useState} from 'react';
import './App.css';

const App = () => {
  const [val, setVal] = useState(0)
  const [tax1, setTax1] = useState(0)
  const [tax2, setTax2] = useState(0)
  const [msg, setMsg] = useState(<p>set a price...</p>)
  const doChange = e => {
    setVal(e.target.value)
  }
  useEffect(() => {
    let res = <div>
        <p>軽減税率（8%）： {tax1}円</p>
        <p>軽減税率（10%）： {tax2}円</p>
    </div>
    setMsg(res)
  }, [tax1, tax2])
  useEffect(() => {
    setTax1(Math.floor(val * 1.08))
  })
  useEffect(() => {
    setTax2(Math.floor(val * 1.1))
  })
  return (
    <div>
      <h1 className='bg-primary text-white display-4'>React</h1>
      <div className='container'>
        <h4 className='my-3'>Hooks sample</h4>
        <AlertMessage msg={msg} />
        <div className='form-group'>
          <label>Input:</label>
          <input type='number' className='form-control' onChange={doChange} />
        </div>
      </div>
    </div>
  )
}

const AlertMessage = props => {
  return (
    <div className='alert alert-primary h5 text-primary'>
      <h5>{props.msg}</h5>
    </div>
  )
}

export default App

あとがき

特になし