[리액트] 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