[React]useInterval

안녕하세요. 하늘은맑고 입니다.

 

오늘 소개드릴 커스텀훅은 javaScript의 setInterval을 커스텀 훅으로 만들었습니다.

React는 컴포넌트별로 보여졌다가 사라졌다가 하는데요.

이 컴포넌트가 생성될때 기준으로 특정시간 후 함수를 실행하고

컴포넌트가 사라졌을때 interval을 clear해주는 함수입니다.

본 포스팅은 React의 기본(useEffect, useRef, 커스텀훅), javaScript의 setInterval 함수의 이해를 필요로합니다.

---

import { useEffect, useRef } from 'react';

function useInterval(callback, delay) { // 변수로 콜백함수와, 시간을 받습니다.
    const savedCallback = useRef();

    useEffect(() => {
        savedCallback.current = callback; // 콜백함수를 useRef에 할당
    }, [callback]);

    useEffect(() => {
        function executeCallback() { // 콜백함수를 실행시키는 함수
            savedCallback.current();
        }

        let id = setInterval(executeCallback, delay); // 시간이 되면 js setInterval로 콜백함수 실행
        return () => clearInterval(id); // 컴포넌트가 언마운트(사라지면) interval함수 삭제.

    }, [delay]);
}

export default useInterval;

 

예제

    useInterval(() => {
        //function()
    }, 60000)

특정시간 이후 새로운 데이터를 로드할때 활용하면 좋습니다.

---

 

 

귀한시간 읽어주셔서 감사합니다.