[URH-50] useEventListener 신규

[foresec]

👾 Pull Request

• 티켓: useEventListener 신규

• 상태: 신규

1️⃣ Spec

• 특정 이벤트를 지정된 Element에 등록하고, 해당 이벤트가 발생할 때 지정된 callback을 호출하는 커스텀 훅
• 이벤트 리스너를 간편하게 관리할 수 있음

2️⃣ 변경 사항

• 없음

3️⃣ 예시 코드

기본적인 RefObject에 이벤트리스너를 지정할때

import { useRef } from 'react';
import useEventListener from './hooks/useEventListener';

function App() {
  const buttonRef = useRef<HTMLButtonElement>(null);

  const handleClick = () => {
    console.log('Button clicked!');
  };

  // RefObject에 대해 click이벤트를 설정
  useEventListener("click", handleClick, buttonRef);

  return (
    <div>
      <button ref={buttonRef}>Click</button>
    </div>
  );
}

export default App;

그 외 다양한 경우들

1. 기본 window에 바로 설정
2. HTMLElement에 설정
3. EventListener 기본 option 활용(capture/once/passive)

import useEventListener from './hooks/useEventListener';

function App() {
  const handleResize = () => {
    console.log(window.innerWidth, window.innerHeight);
  };

  const handleClick = (event: MouseEvent) => {
    console.log(event.clientX, event.clientY);
  };

  const handleKeydown = (event: KeyboardEvent) => {
    console.log('Key pressed:', event.key);
  };

  // 1. Window에 대해 resize 이벤트를 설정
  useEventListener('resize', handleResize);

  // 2. HTMLElement에 대해 click 이벤트를 설정
  useEventListener('click', handleClick, document.getElementById('myButton')!);

  // 3. Document에 대해 keydown 이벤트를 설정 + once 옵션 사용
  useEventListener('keydown', handleKeydown, document, { once: true });

  return (
    <div>
      <button id="myButton">Click</button>
    </div>
  );
}

export default App;

4️⃣ 관련 문서 (선택 사항)

• https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener

---

• 다른 레퍼런스를 참고하며 원래 오버로딩으로 구현되었었는데(216368d) Generic으로 바꾸는 과정에서 최대한 노력은 했으나, 혹시 더 좋은 아이디어가 있으시다면 알려주시면 좋을 것 같습니다.

[bicochan]

고생하셨어요 소현 님!👍🏻✨
어떤 레퍼런스를 참고하셨는지 궁금한데 링크 한 번 남겨주실 수 있으실까요?

[foresec]

@bicochan useEventListener 여기 코드를 참고 했었습니다!

[suhyeoonn]

고생하셨습니다~! 특히 window에 이벤트 연결할 때 유용할 것 같네요🤩