※타이머 기능 구현
-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
'개인 공부 > 타이머' 카테고리의 다른 글
COMPLETE TIMER (0) | 2024.02.07 |
---|---|
4. HOUR, STOP/RESTART, RESET (0) | 2024.02.07 |
3. Time Input (0) | 2024.01.26 |
2. padStart, setTimeout (0) | 2024.01.26 |