[React] scroll 이벤트 리스너 unmounted 처리

window.addEventListener('scroll')

현재 진행하고 있는 프로젝트에 스크롤 위치에 따라 삽입한 사진에 애니메이션 효과를 주고 싶어서 스크롤 이벤트를 통해 구현을 해놨었다. 이 놈이 참 말썽인게, 처음에는 스크롤이 될 때마다 렌더링이 되어서 무한 렌더링에 한번 시달려서 컴포넌트들을 다 분리해주는 방식으로 해결을 했었다. 이번에는 해당 컴포넌트가 unmount 됐을 때의 처리를 해주지 않아서 콘솔 창에 에러 로그가 찍혔다.

 

 

에러가 난 코드는 다음과 같다.

 

const getCurrentScroll = () => {
    if (
      ((window.scrollY + window.innerHeight) / document.body.clientHeight) *
        100 >=
      28
    ) {
      setScrollPosition(13);
    } else if (
      ((window.scrollY + window.innerHeight) / document.body.clientHeight) *
        100 <
      28
    ) {
      setScrollPosition(0);
    }
};

window.addEventListener('scroll', getCurrentScroll);

 

이런식으로 그냥 컴포넌트에 eventListener를 달기만 해주었다. 그리고 스크롤이 특정 위치에 있으면 state를 갱신해주는 방식으로 구현을 했다. 아까도 말했지만, 이렇게 작성을 하고 router를 통해 다른 페이지로 넘어간다던지, unmount가 되면 위와 같은 에러가 나는 것 같다. 그래서 찾아본 결과 removeEventListener를 통해 해결할 수 있을 것 같았다. useEffect를 사용하고, clean-up 함수로 removeEventListener를 실행시킨다.

 

useEffect(() => {
    window.addEventListener('scroll', getCurrentScroll);

    return () => window.removeEventListener('scroll', getCurrentScroll);
});

 

여기서 return 이하의 코드가 clean-up 함수로서 componentWillUnmount 역할을 한다고 생각하면 된다. 이렇게 하면 컴포넌트가 unmount 될 때  clean-up 함수가 실행되고 removeEventListener가 스크롤 이벤트 리스너를 제거 해주게 된다.