함수형 컴포넌트에서는 event listener를 해제할 때 어떻게 해야할까요?

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

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

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

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

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

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

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

함수형 컴포넌트의 생성, 제거(clean up)

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

위처럼 함수형 컴포넌트는 라이프사이클 메소드를 사용할 수 없기때문에 리액트훅 useEffect()를 사용해야됩니다

첫번째 인자는 처음 렌더링할때 화살표 함수가 실행됩니다
두번째 인자의 [text] dependency array(의존성 배열) 리렌더링(두번째렌더링) [text] 안에 요소를 확인후에 바뀐게 있을때만 화살표 함수를 실행합니다

리액트훅이란?

클래스 리액트 16.8 버전부터 추가된 기능이며, 컴포넌트와 생명주기 메서드를 이용하여 작업을 하던 기존 방식에서 벗어나 함수형 컴포넌트에서도 더 직관적이고 재사용성이 좋은 함수를 이용하여 작업할 수 있게 만든 기능

리액트 훅 사용 규칙

1. 훅은 최상위 레벨에서만 호출 가능합니다(반복문, 조건문, 중첩된 함수 내부에서 호출 불가능)

2. 훅은 오직 리액트 함수 컴포넌트 내에서만 호출 가능합니다