useEffectEvent

 

 

  useEffectEvent는 React 18에서 도입된 새로운 훅 중 하나이다. 이 훅은 useEffect와 유사하게 작동하지만 DOM 이벤트 핸들러를 등록하고 해제하는 작업을 간편하게 수행할 수 있도록 도와준다.

  useEffectEvent를 사용하면 DOM 이벤트 핸들러를 등록하고 해제하기 위해 매번 useEffect를 사용할 필요가 없어진다. 이는 코드를 더 간결하고 가독성 있게 만들어주며 불필요한 코드 반복을 줄여준다. useEffectEvent의 구조는 다음과 같다.

function useEffectEvent(target, eventName, handler, options) {
	useEffect(() => {
    	target.addEventListener(eventName, handler, options);
        return () => {
        	target.removeEventListener(eventName, handler, options);
        };
    }, [target, eventName, handler, options]);
}

 

이 함수는 target(이벤트 대상 DOM 엘리먼트), eventName(등록할 이벤트 이름), handler(이벤트 핸들러 함수), options(옵션 객체)를 인자로 받는다. useEffect와 같이 이 함수 내부에서 이벤트 핸들러를 등록하고 컴포넌트가 언마운트될 때 이벤트 핸들러를 해제한다. 사용 예시는 아래와 같다.

import { useEffectEvent } from 'react-use';

function MyComponent() {
	const handleClick = () => {
    	console.log('button clicked');
    }
    
    useEffectEvent(document, 'click', handleClick);
    
    return (
    	<div>
        	<button>Click me</button>
        </div>
    );
}

이 예제에서 document 객체에 click 이벤트를 등록하고 이벤트 핸들러로 handleClick 함수를 전달한다. useEffectEvent는 컴포넌트가 마운트되고 언마운트될 때 이벤트를 등록하고 해제한다. 결과적으로 컴포넌트가 렌더링 된 후에는 document 객체에 click 이벤트가 등록되어 있으므로 사용자가 문서 어디를 클릭해도 handleClick 함수가 호출되어 button clicked 메시지가 콘솔에 출력된다. 컴포넌트가 언마운트될 때 useEffectEvent의 cleanup 함수가 호출되어 document 객체에서 click 이벤트가 제거된다. 이후에도 더 이상 handleClick 함수가 호출되지 않게 된다.

 

• 그렇다면 굳이 이렇게 React에서 DOM 이벤트 핸들러는 사용하는 걸까? 

  React는 사용자 상호 작용 및 기타 이벤트를 처리하는 데 사용할 수 있는 자체 이벤트 시스템을 제공한다. 그래서 우리가 React로 개발할 때는 대부분 React안에서 이벤트를 처리한다. 이것을 React 합성 이벤트라고 한다. 

  그러나 React에서 DOM 이벤트 핸들러를 사용하는 이유로 타사 라이브러리와 작업하게 되거나 DOM 이벤트에 의존하는 기존 코드와 통합할 때가 그렇다. 간단히 말해서 React기반 라이브러리가 아닌 js기반 라이브러리 이거나 순수 js로만 이뤄진 코드와 통합할 때 사용할 필요가 있다는 것이다. 예를 들어 네이티브 DOM 클릭 이벤트가 툴팁을 트리거할 것으로 예상하는 차트 라이브러리를 사용한다면 React 합성이벤트가 아닌 DOM 이벤트 핸들러를 사용해야 하는 것이다.

  React에서 DOM 이벤트 핸들러를 사용하는 또 다른 이유로 기본 이벤트 핸들러가 필요한 특정 브라우저 API를 처리할 때가 있다. 예를 들어 HTML5 drag&drop API로 작업하는 경우 기본 DOM drag&drop 이벤트 핸들러를 사용하여 drag&drop 이벤트를 감지하고 응답해야 한다.

  마지막으로 네이티브 DOM 이벤트 핸들러를 사용하는 것이 합성 React 이벤트를 사용하는 것보다 단순히 더 성능이 뛰어나고 우아한 솔루션을 제공하는 경우가 있다. 예를 들어 마우스 이동 이벤트와 같이 빈도가 높은 이벤트를 수신해야 하는 경우 기본 DOM 이벤트 핸들러를 사용하는 것이 React 합성 이벤트를 사용하는 것보다 더 효율적일 수 있다.