[React] Event listener 해제

Q.라이프사이클 메소드를 사용할 수 없는 함수형 컴포넌트에서는 event listener를 해제할 때 어떻게 해야할까?

- event listner란?
사용자가 어떤 행동(=event)를 하는지 지켜보다가 알려주는 것
(ex. 클릭, 호버 등)

- event listener를 왜 해제해야 하나?
웹 애플리케이션 메모리 누수의 원인이 될 수도있기때문에 해당 이벤트 리스너가 필요없어지면 반드시 삭제해야 된다.

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

text.current.addEventListener('mouseover', hoverEvnet); 
// 생성하는 방법
text.current.removeEventListener('mouseover', hoverEvnet);  
// 삭제하는 방법

함수형 컴포넌트의 생성, 제거(clean up)
=> 리액트 훅 useEffect()를 이용한다!

React.useEffect(() => {
    text.current.addEventListener("mouseover", hoverEvent);
    // rendering이 실행될 구문이 들어가는 부분
    // componentDidMount, componentDidUpdate일 때 동작하는 부분   
    return () => {        text.current.removeEventListener("mouseover", hoverEvent);
        // 여기가 clean up 부분 componentWillUnmount 때 동작하는 부분
    };
  }, [text]);

(Reference https://velog.io/@rudans987/%ED%95%A8%EC%88%98%ED%98%95-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%97%90%EC%84%9C%EB%8A%94-event-listener%EB%A5%BC-%ED%95%B4%EC%A0%9C%ED%95%A0-%EB%95%8C-%EC%96%B4%EB%96%BB%EA%B2%8C-%ED%95%B4%EC%95%BC%ED%95%A0%EA%B9%8C%EC%9A%94)