useTimeout
지정한 시간 후에 콜백 함수를 실행하는 커스텀 훅ReactTypescript
예시
0초
타이머가 종료되면 alert이 실행됩니다!
API
useTimeout()- Parameters
- callback (Function)실행할 콜백 함수
- delay (number)콜백 실행 전 대기 시간(ms). 음수인 경우 타이머가 시작되지 않습니다.
- Returns
- start (Function)타이머를 시작하는 함수
- clear (Function)타이머를 취소하는 함수
- reset (Function)타이머를 재시작하는 함수
- isPending (boolean)타이머가 실행 중인지 여부
개발 및 사용환경
ReactTypescript사용법
1// 기본 사용
2const { start, clear, reset, isPending } = useTimeout(() => {
3 console.log("3초 후 실행");
4}, 3000);
5
6// 타이머 시작
7start();
8
9// 타이머 취소
10clear();
11
12// 타이머 재시작
13reset();
14
15// 상태 확인
16console.log(isPending); // 타이머 실행 중 여부Hook
1import { useCallback, useEffect, useRef, useState } from "react";
2
3/**
4 * 지정된 시간(delay) 후에 콜백 함수를 실행하는 React 훅
5 *
6 * @param callback - delay 시간 후에 실행될 콜백 함수
7 * @param delay - 콜백 함수 실행 전 대기 시간 (밀리초). 음수인 경우 타이머가 시작되지 않음
8 * @returns {Object} 타이머 제어를 위한 메서드와 상태
9 * @property {Function} start - 타이머 시작
10 * @property {Function} clear - 타이머 취소
11 * @property {Function} reset - 타이머 재시작
12 * @property {boolean} isPending - 타이머가 실행 중인지 여부
13 */
14export function useTimeout(callback: () => void, delay: number) {
15 const timeoutRef = useRef<NodeJS.Timeout | null>(null);
16 const savedCallback = useRef(callback);
17 const [isPending, setIsPending] = useState(false);
18
19 useEffect(() => {
20 savedCallback.current = callback;
21 }, [callback]);
22
23 const clear = useCallback(() => {
24 if (timeoutRef.current) {
25 clearTimeout(timeoutRef.current);
26 timeoutRef.current = null;
27 }
28 setIsPending(false);
29 }, []);
30
31 const start = useCallback(() => {
32 if (delay < 0) {
33 return;
34 }
35
36 clear();
37 setIsPending(true);
38
39 timeoutRef.current = setTimeout(() => {
40 savedCallback.current();
41 timeoutRef.current = null;
42 setIsPending(false);
43 }, delay);
44 }, [delay, clear]);
45
46 const reset = useCallback(() => {
47 start();
48 }, [start]);
49
50 useEffect(() => clear, [clear]);
51
52 return { start, clear, reset, isPending };
53}