useInterval
지정한 간격으로 콜백 함수를 실행하는 커스텀 훅ReactTypescript
예시
0
1초마다 카운트가 증가합니다.
API
useInterval()- Parameters
- callback (Function)실행할 콜백 함수
- delay (number | null)콜백 실행 간격(ms). null이면 인터벌이 중지됩니다.
- Returns
- void (void)이 훅은 값을 반환하지 않습니다.
개발 및 사용환경
ReactTypescript사용법
1// 기본 사용
2useInterval(() => {
3 console.log("1초마다 실행");
4}, 1000);
5
6// 조건부 실행
7const [isRunning, setIsRunning] = useState(true);
8useInterval(() => {
9 console.log("실행 중...");
10}, isRunning ? 1000 : null);
11
12// 컴포넌트 언마운트 시 자동 정리
13useInterval(() => {
14 // 정리 함수가 자동으로 호출됨
15}, 1000);Hook
1import { useEffect, useRef } from "react";
2
3/**
4 * 지정한 간격으로 콜백 함수를 실행하는 Hook
5 *
6 * @param callback - 실행할 콜백 함수
7 * @param delay - 콜백 실행 간격(ms)
8 * - null: 인터벌 중지
9 * - 0 이하: 인터벌 중지 (경고 메시지 출력)
10 * - 양수: 지정된 간격으로 실행
11 */
12export function useInterval(callback: () => void, delay: number | null) {
13 const savedCallback = useRef(callback);
14
15 useEffect(() => {
16 savedCallback.current = callback;
17 }, [callback]);
18
19 useEffect(() => {
20 if (delay === null) return;
21
22 if (delay <= 0) {
23 console.warn("useInterval: delay must be a positive number");
24 return;
25 }
26
27 const id = setInterval(() => savedCallback.current(), delay);
28 return () => clearInterval(id);
29 }, [delay]);
30}