[React] window 객체에 이벤트를 연결 할 때 주의점

- window 객체에 이벤트를 연결하면 다른 서브페이지의 컴포넌트에서도 동일하게 함수호출되므로 에러 발생
- 해당 컴포넌트가 unmount시 무조건 window 전역 객체에 연결되어 있는 이벤트 핸들러 함수 제거
- 이때 removeEventListener로 핸들러 함수를 제거하기 위해서는 해당 함수가 외부 함수로 선언 되어 있어야 가능

 

useEffect(() => {
		window.addEventListener('resize', 특정함수 호출);
		window.addEventListener('scroll', 특정함수 호출);
		window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });

		return () => {
			//윈도우 객체에 이벤트 연결하면 다른 서브페이지의 컴포넌트에서도 동일하게 함수호출되므로 에러 발생
			//해당 컴포넌트가 unmount시 무조건 window전역객체에 연결되어 있는 이벤트 핸들러 함수 제거
			//이때 removeEventListener로 핸들러 함수를 제거하기 위해서는 해당 함수로 외부로 함수로 선언되어 있어야가능
			window.removeEventListener('resize', 특정함수 호출);
			window.removeEventListener('scroll', 특정함수 호출);
			window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
		};
	}, []);