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

이벤트 리스너

이벤트 리스너는 DOM객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트이다.

이벤트 리스너를 이용하면 특정 DOM에 위에서 말한 Javascript 이벤트가 발생할 때 특정 함수를 호출한다.

이벤트 리스너의 경우 웹 애플리케이션 메모리 누수의 원인이 될 수 있다. 더 이상 해당 이벤트 리스너가 필요 없다고 하면 반드시 추가된 이벤트 리스너는 반드시 삭제해주어야 한다.

---

리액트에서의 라이프 사이클

리액트에는 컴포넌트라는 개념이 있는데 컴포넌트 생성을 하는 방법에는 클래스형 컴포넌트, 함수형 컴포넌트 2가지가 있다. 이 중 클래스형 컴포넌트는 라이프 사이클이라는 개념이 해당된다.
라이프 사이클은 컴포넌트가 브라우저 상에 나타나고, 업데이트 되고, 사라지게 될 때 호출되는 메서드들을 합쳐서 지칭하는 말이다.

---

클래스형 컴포넌트에서 event listener 해제하기

클래스형 컴포넌트에서는 컴포넌트가 화면에서 사라지기 직전에 호출되는 메서드 componentWillUnmount를 사용하여 이벤트 리스너를 해제한다.

---

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

그럼 라이프 사이클 메서드를 사용할 수 없는 함수형 컴포넌트에서는 어떻게 event를 실행시기고 해제해야할까?

useEffect

함수형 컴포넌트에서는 각각의 라이프사이클 메소드를 useEffect 하나로 통일시킬 수 있다. 대신 dependency를 선언하여 시점을 구분한다.

useEffect(() => {
    console.log('hi')
  }, [/* dependency 선언하는 곳 */])

빈 배열을 선언하면 최초 로드시에만 렌더링이 된다.

이벤트 실행하기

useEffect를 이용해서 최초 로드 시에 addEventListener를 사용하여 이벤트를 추가해주면 이벤트 감지가 시작된다.

useEffect(() => {
    document.addEventListener();
  }, [])

이벤트 해제하기

이벤트를 등록하고 난 뒤 성능 저하를 방지하기 위해 컴포넌트가 언마운트 될 때 꼭 이벤트 등록을 해제해주어햐 한다. 함수형 클래스에서는 useEffect의 내부 함수의 return값으로 removeEventListener를 통해 해제해주면 된다.

useEffect(() => {
    document.addEventListener();
  
  	return () => {
      document.removeEventListener();
    }
  }, [])