react에서 removeEventListener 사용하기

May 21, 2020

문제점

const close = (e) => {
  ...
}

useEffect(() => {
  if (ViewState === '') {
    document.addEventListener('click', close)
  } else {
    document.removeEventListener('click', close)
  }
}, [ViewState])

위와 같이 state가 바뀔 때 마다 eventListener를 추가/삭제하려고 하였다.

하지만 이벤트가 삭제되지 않았다. eventListener를 추가/삭제하려면, 동일한 함수가 전달되어야한다. state가 바뀔 때마다 close 함수가 재생성되어, 컴포넌트 업데이터 전과 동일하지 않은 함수로 인식되는 것 같다.

개선점

const close = useCallback((e) => {
  ...
}, [])

useEffect(() => {
  if (ViewState === '') {
    document.addEventListener('click', close)
  } else {
    document.removeEventListener('click', close)
  }
}, [ViewState])

전달되는 함수에 useCallback()을 사용하여, 함수가 재생성되는 것을 방지했다.

Written by@[owlssi]

프론트 공부 중입니다.

GitHub