[React.js] useEffect와 addEventListener (can't perform a react state update on an unmounted component)

 

 

블로그 포스트 페이지 내에 Scroll Indicator를 개발하던 중 마주친 Warning과 해결 과정에 대해 남겨두려고 한다. 

 

일단 문제의 그 빨간 글씨의 Warning은 아래와 같다. 

 

Unmounted 된 컴포넌트에 대해 상태를 업데이트할 수 없다 ! 해당 작업은 수행되지  않지만, 메모리 누수를 발생시킨다. 
고치려면 useEffect의 cleanup function을 이용하라. 

 

 

React에서 window나 document에 addEventListener를 통해 이벤트를 추가할 때, 그냥 사용하게 되면 렌더링 시점이 구분되지 않아 에러가 난다.

따라서 useEffect를 통해 최초 로드 시 이벤트를 추가해 주어야 한다. 

useEffect(() => {
    window.addEventListener("scroll", onScroll);
}, []);

 

 

이렇게만 할 경우, 위에서 본 빨간 글씨의 Warning을 만날 수 있다. 😨

 

 

Scroll Indicator 구현을 위해 onScroll() 콜백 함수에서 스크롤 발생 시마다 스크롤 퍼센티지를 계산하여 setState를 통해 progress bar 상태를 업데이트 해주고 있다. 

 

addEventListener는 window에서 스크롤 이벤트 발생을 감지하여 onScroll 콜백 함수를 실행시킨다. 

eventListener에 의해 onScroll() 내의 setState가 작동하고 이로 인해 렌더링이 새로 진행된다.

 

이로 인해 addEventListener를 통해 이벤트를 등록하고 난 뒤, 이벤트 등록을 해제해주지 않으면 mouseover 혹은 scroll 이벤트의 경우, 계속해서 이벤트를 감지하기 때문에 성능 저하를 일으킬 수 있다. 

 

따라서 컴포넌트가 unmount 될 때 이벤트 등록을 해제해 주어야 한다.

 

이벤트 등록을 해제할 때는 useEffect의 cleanup function을 이용하면 된다. 

즉, 아래와 같이 useEffect 내부 함수의 return 값으로 removeEventListener를 통해 해제해주면 된다. 

 

useEffect(() => {
    window.addEventListener("scroll", onScroll);

    return () => {
      window.removeEventListener("scroll", onScroll);
    };
}, []);

 

 

해결 ! 😁

 

 

 

참고

https://babycoder05.tistory.com/entry/React-useEffect%EC%99%80-addEventListener-window-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B7%9C%EC%B9%99

React useEffect와 addEventListener - window 이벤트 렌더링 규칙

https://velog.io/@zerozoo-front/useEffect%EC%99%80-addEventListener