[react-add-event-listener] 리액트용 addEventListener 훅

리액트에서 특정 요소에 직접 event listener 를 할당해야 하는 경우에 사용될 수 있는 useAddEventListener 훅을 제공하는 @wisdomstar94/react-add-event-listener 패키지를 소개합니다.

 

설치 방법

npm i @wisdomstar94/react-add-event-listener

https://www.npmjs.com/package/@wisdomstar94/react-add-event-listener

@wisdomstar94/react-add-event-listener

 

useEffect 안에서 addEventListner 를 사용할 시 발생하는 이슈

리액트에서 제공하는 props 를 사용하지 않고 특정 요소에 직접 이벤트 리스너를 할당해야 할 때 해당 리스너의 콜백함수 내에서 컴포넌트 내에 선언한 특정 state 를 참조할 경우 해당 state 는 리스너 할당 당시의 변수를 바라보게 됩니다. 즉, 이후에 useState 의 setter 함수에 의해 state 가 변경되더라도 addEventListener 의 콜백 함수 내에선 계속 예전의 상태 값을 참조하게 되는 이슈가 발생합니다.

 

useAddEventListener 훅 개발

addEventListener 의 콜백 함수 내에서 계속 최신 상태의 state 를 참조하게 하기 위해서는 addEventListener 의 콜백 함수 내에서 참조하고 있는 state 들이 변경될 경우 이전에 할당했던 listener 는 삭제하고 새로운 listener 로 다시 할당해주어야 하는 과정이 필요합니다. 이러한 과정이 필요할 때마다 일일이 동일한 로직을 작성해주는 피로를 줄이기 위해, 이러한 과정을 자동으로 처리해주는 "useAddEventListener" 라는 훅을 "@wisdomstar94/react-add-event-listener" 라는 패키지로 개발하였습니다.

 

Window 및 HTMLElement 에 리스너 할당시 타입추론 제공

window 혹은 특정 html element 에 addEventListener 를 작성할 때 typescript 사용시 이벤트명마다 각각의 콜백함수 인터페이스가 자동으로 타입추론이 되는데, 이를 useAddEventListener 훅을 사용할 때도 동일하게 타입추론이 이루어질 수 있도록 하였습니다.