useEventListener

useEventListener (이벤트 리스너)

useEventListener 훅은 ref가 할당된 요소에 특정 이벤트 리스너를 추가해요. addEventListener 메서드와 같은 옵션을 지원하며, 컴포넌트가 언마운트되면 리스너가 자동으로 제거돼요.

출처: 문서

본문

useEventListener 훅은 ref가 할당된 요소에 이벤트 리스너를 추가해요. 훅은 addEventListener 메서드와 동일한 옵션을 지원해요. 컴포넌트가 언마운트되면 리스너는 자동으로 제거돼요.

import { useState, useCallback } from 'react';
import { Button } from '@mantine/core';
import { useEventListener } from '@mantine/hooks';

function Demo() {
  const [count, setCount] = useState(0);
  const increment = useCallback(() => setCount((c) => c + 1), []);
  const ref = useEventListener('click', increment);
  return <Button ref={ref}>Button clicks: {count}</Button>;
}

정의 (Definition)

function useEventListener<K extends keyof HTMLElementEventMap>(
  type: K,
  listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
  options?: boolean | AddEventListenerOptions,
): React.RefCallback<HTMLElement>

더 알아보기 (Learn more)