[React/Typescript] setInterval(); 대용으로 useInterval(); custom hook 사용하기

 

하단의 useInterval(); 데모 codeSandBox를 참고하여 프로젝트에 사용했다.

useInterval Demo (Typescript) - CodeSandbox

 

1. useInterval.tsx 을 생성하여 하단의 내용을 넣고 hooks들을 보관할 곳에 저장.

// useInterval.tsx

import { useEffect, useRef } from "react";

interface IUseInterval {
  (callback: () => void, delay: number): void;
}

const useInterval: IUseInterval = (callback, delay) => {
    const savedCallback = useRef<(() => void) | null>(null);
    // After every render, save the latest callback into our ref.
    useEffect(() => {
        savedCallback.current = callback;
    }); 
    useEffect(() => {
        function tick() {
            if (savedCallback.current) {
                savedCallback.current();
            }
        } 
        let id = setInterval(tick, delay);
        return () => clearInterval(id);
    }, [delay]);
};

export default useInterval;

 

2. 프로젝트 내에서 불러와 사용.

// Example.tsx

import React from "react";

// 상단에서 사용할 hook의 import 선언
import useInterval from "../hooks/useInterval";

const Example: React.FC = () => {

	useInterval(() => {
        	// 10초마다 console에 'example' 값이 setInterval되어 찍힌다.
        	console.log('example');
    	}, 10000);

	return(
    	<>
        </>
    );

}

export default Example;