2. padStart, setTimeout

<추가 사항>

※00 : 00(분 : 초) 형식으로 업그레이드

  -padStart 함수로 1 => 01 형식으로 변환

  -setTimeout 함수로 함수 실행 잠시 지연

  -타이머 리셋해서 다시 작동

 

component

  -Button.jsx

page

  -Timer.jsx

 

page - <Timer.jsx>

import React, {useCallback, useEffect, useState} from 'react'
import Button from '../component/Button'

function Timer() {
  const [timeOut, setTimeOut] = useState(true)

  const [second, setSecond] = useState(10)
  const [minuts, setMinuts] = useState(2)
  
  const reduceSecond = () => setSecond(second => Math.max(second - 1, 0))
  const reduceMinuts = () => setMinuts(minuts => Math.max(minuts - 1, 0))

  const secondTimer = String(second).padStart(2, 0) //00 : 00 형식으로 변환
  const minutsTimer = String(minuts).padStart(2, 0)
  
  const timeDelay = useCallback(() => {
    setTimeout(() => { //함수 실행을 1초 지연
      reduceMinuts()
      setSecond(59)
    }, 1000)
  }, [])
    
  const handleResetTimerButton = () => { //타이머 리셋
    setTimeOut(true)
    setSecond(10)
    setMinuts(2)
  }

  useEffect(() => {
    const reduce = setInterval(reduceSecond, 1000)
    return () => clearInterval(reduce)
  })
  
  useEffect(() => {
    if (minuts === 0 && second === 0) { //00 : 00 이면 타임아웃
      setTimeOut(false)
    } else if (second === 0) { //초가 00이 되면 분 1 감소
      timeDelay()
    }
  }, [minuts, second, timeDelay])

  return (
    <div>
      {timeOut ? (
        <div>
          <h2>{`${minutsTimer} : ${secondTimer}`}</h2>
        </div>
      ) : (
        <div>
          <h2>Time Out!!!</h2>
          <Button name={'Reset'} onClick={handleResetTimerButton} />
        </div>
      )}
    </div>
  )
}

export default Timer