setInterval 함수를 이용해서 구현
const Timer = () => {
const [minutes, setMinutes] = useState(0);
const [seconds, setSeconds] = useState(0);
const [start, setStart] = useState(false);
const startTimer = () => {
setStart(true); // 타이머 시작
};
const stopTimer = () => {
setStart(false); // 타이머 중지
};
useEffect(() => {
const countdown = setInterval(() => {
if (start) {
if (parseInt(seconds) >= 0) {
setSeconds(parseInt(seconds) + 1);
}
if (parseInt(seconds) === 59) {
setSeconds(0);
setMinutes(parseInt(minutes) + 1);
}
} else {
clearInterval(countdown);
}
}, 1000);
return () => clearInterval(countdown);
}, [start, minutes, seconds]);
return (
<div>
<div>
{minutes}:{seconds}
</div>
<button onClick={startTimer}>시작</button>
<button onClick={stopTimer}>멈춰</button>
</div>
);
};