1. Basic Timer

※타이머 기능 구현

  -Button 컴포넌트 추가

  -Timer 페이지 추가

 

component

  -Button.jsx

page

  -Timer.jsx

 

component - <Button.jsx>

import React from 'react'

function Button({type, className, name, onClick}) {
  return (
    <div>
      <button type={type} className={className} onClick={onClick}>
        {name}
      </button>
    </div>
  )
}

export default Button

 

page - <Timer.jsx>

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

function Timer() {
  const [timer, setTimer] = useState(10) //주어진 시간 10초로 지정
  const [timeOut, setTimeOut] = useState(true) //타임아웃 유무 확인
  const reduceTimer = () => setTimer(timer => Math.max(timer - 1, 0)) //0까지 1씩 감소
  
  const handleResetTimerButton = () => { //타이머 다시 시작
    setTimeOut(true)
    setTimer(10)
  }

  useEffect(() => {
    const reduce = setInterval(reduceTimer, 1000)
    return () => clearInterval(reduce)
  })

  useEffect(() => { //0초가 되면 타임아웃 
    if (timer === 0) {
      setTimeOut(false)
    }
  }, [timer])

  return (
    <div>
      {timeOut ? ( 
        <div> //타이머 상태(true)
          <h2>{timer}</h2>
        </div>
      ) : (
        <div> //타임아웃 상태(false)
          <h2>Time Out!!!</h2>
          <Button name={'Reset'} onClick={handleResetTimerButton} />
        </div>
      )}
    </div>
  )
}

export default Timer

 

App.js

import React from 'react'
import Timer from './page/Timer'

function App() {
  return (
    <div>
      <Timer />
    </div>
  )
}

export default App