[React]useEffect 클린업함수

• addEventListener사용시 클린업 해야함
• 클린업 함수는 이펙트를 사용하는 컴포넌트가 화면에서 사라질때 실행되므로 클린업을 하지않으면 요소가 사라져도 스크롤이벤트가 계속 발생

useEffect(() => {
  function handleScroll(e) {
    console.log(window.scrollX, window.scrollY);
  }
  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, []);

 

-컴포넌트가 언마운트되어 화면에서 사라질때

1. 첫번째렌더링
2. useEffect코드 실행
3. 컴포넌트가 언마운트되면 클린업실행

-컴포넌트가 계속 렌더링될때 

1. 첫번째렌더링
2. useEffect실행
3. 두번째렌더링
4. 클린업실행