[React.js, 성능최적화] UseEffect Memory resource Leak

안녕하세요! 오늘은 useEffect를 사용하던 도중 만난 에러를 기록할려고 합니다. 😇

리액트에서 scroll Event를 구현하던 도중, 갑자기 콘솔에 UseEffect에 관한 에러가 뜨더라고요! 에러 내용은 다음과 같습니다.

 

Warning: Can't perform a React state update on an unmounted component. 
This is a no-op, but it indicates a memory leak in your application.
To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

에러는 다음과 같습니다.

 

에러를 단순히 살펴보면 , 언마운트된 리액트 컴포넌트가 업데이트 되었고, 이 것은 메모리 누수와 관련이 있습니다. 이 것을 고치기위해서는 비동기 작업 useEffect에 클린업 함수를 사용하라고 합니다.

 

우선 제가 useEffect에 작성한 함수를 살펴봅시다!

 

useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    setInnerHeight(window.innerHeight);

    
  }, [innerHeight, currentScroll]);

  const handleScroll = () => {
    setCurrentScroll(window.scrollY);
  };

문제가 무엇일까요? useEffect에 eventlistner를 사용했지만 이 것을 remove해주지 않아서 발생하는 에러였습니다. 이 행위는 컴포넌트가 랜더링 될때마다 이벤트를 발생시킬 것이고, 당연히 성능에 치명적이겠죠?

 

useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    setInnerHeight(window.innerHeight);
    return () => {
      window.removeEventListener('scroll', handleScroll); //clean up
   }
    
  }, [innerHeight, currentScroll]);

  const handleScroll = () => {
    setCurrentScroll(window.scrollY);
  };

따라서 다음과 같이 event listner를 remove해주는 클린업 함수가 필요한 것입니다! 이렇게 되면, 리액트는 더 이상 불만을 표출하지 않을 것 입니다!

 

굉장히 당연하고 많이 있을만한 에러였지만, 누구나 할 수 있는 실수인 것 같습니다! 모두 성능향상을 위해 힘써보도록 합시다!!