슬라이드쇼의 기본 기능은 얼추 만들었지만, 아직 필요한 부가기능들이 많다. 이번 순서는 슬라이스쇼가 일정 시간마다 자동으로 넘어가는 기능이다.

1. 슬라이드 자동 이동.

function useInterval(callback, delay) {
    const savedCallback = useRef();

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

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

(...)

useInterval(() => {
    showSlide(currentSlide);
    setCurrentSlide(currentSlide + 1);

    if (currentSlide > slideLength - 2) {
        setCurrentSlide(0);
    };
}, 2000);

구글링해서 내가 원하는데로 구현은 했는데 이해하기가 힘들어서 각 부분에 대한 설명을 작성하고, 내가 이해한 사족을 붙여 구현 과정을 정리해보았다.

useInterval 함수는 두 개의 매개변수 callback과 delay를 받습니다. callback은 주기적으로 실행될 콜백 함수이며, delay는 콜백 함수 실행 간격을 나타냅니다.

useInterval 함수를 호출했을 때, 첫 번째 인자로는 callback 익명함수가 두 번째 인자에는 다음 실행까지의 지연시간(2초)이 사용되었다.

useRef() 함수를 사용하여 savedCallback이라는 변수를 생성합니다. 이는 callback 함수를 저장하는데 사용됩니다.

useInterval 함수에서는 우선 매개변수로 들어오는 콜백함수가 변화할 때마다 useRef 함수를 이용하여 받아온 콜백함수를 저장하게 된다. savedCallback 변수는 언제나 최신의 콜백함수를 가질 수 있는 것이다.

두 번째 useEffect 훅은 delay가 변경될 때마다 실행됩니다. 이 훅은 setInterval을 이용하여 delay 간격으로 tick 함수를 호출합니다. tick 함수는 savedCallback.current()을 호출합니다. 이로 인해 callback 함수가 주기적으로 실행됩니다.

다음으로는 우선 최신값으로 관리하는 콜백함수를 가져온다. 그리고 다음 실행까지의 지연시간이 제대로 존재하는 경우에는 setInterval에 콜백함수와 지연시간을 인자로 사용하여 기능을 동작하게 한다. 그리고 clearInterval 함수를 이용하여 setInterval에 등록된 동작이 무한하게 실행되지 않도록 방지한다.

• 익명함수를 return한다?
  useEffect Hook 내부에서 사용되는 return 키워드에 함수를 사용할 경우, 클린업(clean-up) 함수로 간주된다. 이 함수는 컴포넌트가 unmount 될 때와 디펜던시에 포함된 값이 변화할 때 호출된다.

어렵다.. 너무..

• 컴포넌트가 마운트 해제될 때?
  컴포넌트가 DOM에서 제거되는 시점, 컴포넌트가 더 이상 필요하지 않아서 화면에서 제거될 때. 다른 페이지로 이동할 때. useEffect Hook에서 클린업(clean-up) 함수를 반환할 때?.

useEffect에 대한 내용을 공부하면서 상당히 어려움을 겪고 있는 부분이다. return 키워드로 클린업(clean-up) 함수를 만들 수 있는데, 이건 컴포넌트가 마운트 해제될 때 동작하게 된다. 그런데 내 코드에서 컴포넌트가 마운트 해제되는 과정을 도통 이해하지 못하고 있다. useInterval 함수 내부의 클린업(clean-up) 함수는 잘 동작하고 있다. 그런데 나는 페이지를 이동하지도 않았고 컴포넌트가 화면에서 제거되지도 않았다. 그렇다면 도대체 클린업(clean-up) 함수가 어떻게 동작하게 된다는 말인가?

• 아!
  계속 머리를 굴려보다가 해답을 찾았다. 자세한 것은 여기에서..