함수형 Component에서의 EventListener

라이플사이클은 클래스형 Component에서만 사용가능합니다.

함수형 컴포넌트에서는 기존 클래스형 컴포넌트에서 쓰이던componentDidMount와 componentDidUpdate, componentWillUnmount의 기능을 대신하는 리액트훅인 useEffect를 이용합니다!

// 첫번째 인자는 익숙하죠! 화살표 함수! 넵, 렌더링 시 실행할 함수가 여기에 들어갑니다.
  // 두번째 인자의 []! 디펜던시 어레이라고 불러요. 여기 넣어준 값이 변하면 첫번째 인자인 콜백함수를 실행합니다.
  React.useEffect(() => {
    // 여기가 rendering 때 실행될 구문이 들어가는 부분입니다.
    // componentDidMount, componentDidUpdate일 때 동작하는 부분이 여기예요.
    text.current.addEventListener("mouseover", hoverEvent);
    
    return () => {
        // 여기가 clean up 부분입니다.
        // componentWillUnmount 때 동작하는 부분이 여기예요.
        //do something ...
    };
  }, [text]);

EventListener를 이용할때는 useEffect 훅을 이용해서 이벤트를 동작하게 합니다.
Event는 한번 등록되면 계속 남아있기 때문에 꼭 지워줘야 하는데,

useEffect훅에서는 return 안에서 이벤트를 지워줍니다!!