[React] useEffect 내부의 addEventListener 사용

이벤트 콜백함수에 매개변수를 넣지 않아도 되는 경우에는 콜백함수를 바로 작성해야 컴포넌트가 Unmount 되었을 시에 이벤트를 remove 할 수 있습니다.

함수로 콜백함수를 한 번 감싸주게 되면 React.Strictmode에 의해 useEffect가 2번이 실행이 되는데 addEventListener와 removeEventListener에서 콜백함수를 감싸고 있는 함수의 주소가 다르기 때문에 cleanup이 되지 않아서 이벤트가 2번이 등록되게 됩니다. (removeEventListener에서 이벤트 삭제가 안됨)

 

React.Strictmode가 useEffect를 2번 호출하는 이유는 이런 cleanup같은 예시를 포함하여 컴포넌트가 제대로 작동하는지 확인하기 위함인데 이벤트가 2번씩 등록되는 문제가 있기 때문에 매개변수가 필요없는 콜백함수는 함수로 감싸서 실행하면 안된다는 결과값을 얻을 수 있는 것 같습니다.

 

cleanup 없이 window.addEventListener(’click’, print); 이렇게 작성하는 경우에 useEffect가 2번 실행이 되어도 console에 1번씩만 찍히기 때문에 정상적인 동작이라고 생각할 수도 있지만 이벤트를 등록했으면 반드시 remove를 해줘야 합니다. remove없이 addEventListener가 2번 실행되지만 이벤트가 중복되지 않는 이유는 addEventListener의 동작 특성상 같은 함수를 등록하면 중복으로 등록이 되지 않기 때문입니다.

const print = () ⇒ console.log(’print’);

useEffect(() => {
	window.addEventListener('click’, () ⇒ {print()}); // (X)
	window.addEventListener('click', print); // (O)

	return () => {
		window.removeEventListener('click’, () ⇒ {print()}); // (X)
		window.removeEventListener('click', print); // (O)
	}
},[])

그런데 useEffect 훅 내부에서 이벤트 등록시에 매개변수를 넣어야 하는 경우는?

우선은 이러한 경우가 있을 지는 잘 모르겠습니다. 만약에 매개변수를 넣어야 하는 경우가 있다면 useEffect 훅 내부에서는 콜백함수를 cleanup할 수 없어서 이벤트가 중복 등록되서 정상적으로 동작이 안되는데 이런 경우가 거의 없을 것 같습니다. 그리고 이렇게 사용하지 말라고 React 자체에서 권고하는 것 같기도 합니다.

 

일반적으로 JSX 구문 내에서 button 태그 같은 곳에 onClick 이벤트를 프라퍼티 방식으로 등록하는 경우에는 매개변수가 들어가도 문제가 되지 않습니다.

const Component = () => {

	const handleClickButton = (str) => {
		console.log(str);
	}

	return(
		<button onClick={() => handleClickButton('clicked!!!')}>Click</button>
	)
}