section4. 5-7 커스텀 훅으로 우아하게 interval하기

커스텀 훅

• 어떤 특정한 Hook 2개 이상이 반복된다면 커스텀 훅을 만들어낸다.
• 커스텀 훅은 react의 기본 hooks의 조합으로 이루어진다. (기본 훅 여러 개가 세트로 움직인다면? 3개를 세트로 묶어서 커스텀 훅 1개로 퉁 쳐버리면 된다.)

import {useEffect, useRef} from "react";

// 기능
// useInterval(()=>{
//  console.log('hello');
// }, isRunning ? 1000 : null );
function useInterval(callback, delay){
    const savedCallback = useRef();

    useEffect(() => {
        savedCallback.current = callback;
    });

    useEffect(()=>{

        //왜 tick이라는 함수로 감싸서 실행했을까?
        function tick(){
            savedCallback.current();
        }

        if(delay !== null){
            let id = setInterval(tick, delay);
            return () => clearInterval(id);
        }
    },[delay]);

    return savedCallback.current;
}

export default useInterval;

강의에서 만들어 본 useInterval이라는 (useRef + setInterval) 커스텀 훅이다.

 

왜 tick이라는 내부함수가 필요한지에 대해서도 설명해주는데 이해하기 좀 난해하다.

 

따로 기억할것.

※useRef는 항상 최신의 객체를 참조할 수 있게 해준다 라는 것을 기억하자.