컴퓨터언어/React JS
React로 타이머 hooks 간단히 개발하기
bbanpro
2024. 11. 18. 20:48
728x90
반응형
import React, { useRef, useState } from 'react';
export const useTimer = () => {
const [time, setTime] = useState(0);
const [isRunning, setIsRunning] = useState(false);
const intervalRef = useRef<NodeJS.Timeout>();
const startTimer = () => {
if (!isRunning) {
setIsRunning(true);
intervalRef.current = setInterval(() => {
setTime(prevTime => prevTime + 1);
}, 1000);
}
};
const stopTimer = () => {
if (isRunning) {
setIsRunning(false);
clearInterval(intervalRef.current);
}
};
const resetTimer = () => {
setIsRunning(false);
clearInterval(intervalRef.current);
setTime(0);
};
return { startTimer, stopTimer, resetTimer, time };
};
728x90
반응형