React로 타이머 hooks 간단히 개발하기
2024. 11. 18. 20:48ㆍ컴퓨터언어/React JS
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
반응형
'컴퓨터언어 > React JS' 카테고리의 다른 글
Nextjs와 기본 인증 (accessToken, refreshToken) (0) | 2024.11.21 |
---|---|
타입스크립트 as와 satisfies 비교 (0) | 2024.11.20 |
useEffect === componentWillUnMount || componentDidMount || componentDidUpdate (0) | 2020.09.09 |
[Spread Operator] ...을 이용하여 서로 다른 배열이나 객체를 합치자 (0) | 2020.05.24 |
[Complex State] useState가 중복되면 {}로 관리한다 (0) | 2020.05.24 |