Closed foresec closed 4 weeks ago
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;
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;
@bicochan useEventListener 여기 코드를 참고 했었습니다!
👾 Pull Request
1️⃣ Spec
2️⃣ 변경 사항
3️⃣ 예시 코드
기본적인 RefObject에 이벤트리스너를 지정할때
그 외 다양한 경우들
4️⃣ 관련 문서 (선택 사항)