Event listener 해제

🔐event listener는 등록되면 반드시 해제되어야 합니다.
클래스형 컴포넌트에서는 컴포넌트가 화면에서 사라질 때(unmount 될 때) event listener를 해제합니다. (componentWillUnmount에서요!)
그럼 라이프사이클 메소드를 사용할 수 없는 함수형 컴포넌트에서는 event listener를 해제할 때 어떻게 해야할까요?

• 클래스형 컴포넌트에서 componentDidMount() 역할 → 함수형 컴포넌트에서 useEffect()훅
  useEffect의 return구문에서 clean up함수 적용 (useEffect()에서 parameter로 넣은 함수의 return 함수) component의 unmount이전 / update직전에 어떤 작업을 수행하고 싶다면 clean-up함수를 반환해 주어야한다.
  unmount 될 때useEffect(func, [])
  특정값 update 직전useEffect(func, [특정값])
  clean-up함수를 사용하게되면, 작동 순서

re-render -> 이전 effect clean-up -> effect

이벤트 리스너란?

사용자가 어떤 행동(=이벤트)을 하는 지 아닌 지 지켜보다가 알려주는 것입니다

Ex) 마우스 클릭, 마우스 갖다대기, 키보드 누름 등등

왜 이벤트 리스너를 해제해야되나요?

웹 애플리케이션 메모리 누수의 원인이 될 수도있기때문에 해당 이벤트 리스너가 필요없어지면 반드시 삭제해야됩니다.

클래스형 컴포넌트의 생성, 제거(clean up)