라이프사이클 메소드를 사용할 수 없는 함수 컴포넌트에서 event listener을 해제 할때

event listener는 등록되면 반드시 해제되어야 합니다.

클래스형 컴포넌트에서는 컴포넌트가 화면에서 사라질 때(unmount 될 때) event listener를 해제합니다. (componentWillUnmount에서요!)

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

---

함수형 컴포넌트에서 이벤트리스너를 해제하려면 useEffect 훅을 사용해야 한다.

dependency를 선언하여 시점을 구분해준다.

useEffect(() => {
    //
  }, [dependency선언위치])

dependency를 선언하지 않고 빈배열을 넣으면 최초 로드시 렌더링이 된다.

 

그래서 최초 로드시 addEventListener을 사용해 이벤트를 감지시킨다.

//이벤트 실행
useEffect(() => {
    document.addEventListener('~~',{
    });
  }, [])

 

이벤트를 등록하고 나서 성능저하를 막기위해 컴포넌트가 언마운트될 때 이벤트 등록을 해제해야한다.

useEffect(() => {
    text.addEventListener('mouseover', hoverEvent);
    //렌더링이 실행될 구문이 들어가는 부분
    //componentDidMount, componentDidUpdate일 때 동작하는 부분
    
  	return () => {
      text.removeEventListener('mouseover', hoverEvent);
      //compoonentWillUnmount 때 동작하는 clean up 부분
    }
  }, [text])

처음 렌더링시 화살표함수가 실행된다.

두번쨰 인자의 [text]는 의존성 배열로, 두번째 렌더링[text]안의 요소가 바뀐게 있을 때만 화살표 함수를 실행한다. 

 

 

 

 

 

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

함수형 컴포넌트에서 event listener 해제하기

Hooks API Reference – React