ReactJS에서 이벤트를 수신하는 방법

TL; DR

React Hook Solution

Original Discussion Thread

내용물

Introduction

How It Works

Conclusion

소개

내 에서 팬 및 확대/축소 기능이 있는 정적 육각형 그리드를 만들었습니다. 멋지지만 멋지지 않은 점은 다음 버튼 중 하나를 눌러 포인터 모드와 끌기 모드 사이를 전환해야 한다는 점입니다.



이 도구 모음 버튼을 누르는 대신 키보드 단축키를 사용하여 포인터 모드와 끌기 모드 간에 전환하고 싶습니다. Figma의 버튼 단축키 복사, 특히 v 버튼과 h 버튼 키보드 키를 각각 포인터 모드와 드래그 모드에 바인딩하고 싶습니다. 이 기능은 use-event-listener 후크 덕분에 달성되었습니다. 다행스럽게도 React 후크는 이벤트 리스너 작동 방식에 대한 간단한 사례 연구로 사용할 수 있을 만큼 간단합니다.

작동 방식

useEventListener 후크는 간단한 양의 코드가 포함된 하나의 파일입니다.

/* eslint-disable max-params */
import { useRef, useEffect } from 'react';

const useEventListener = (
  eventName,
  handler,
  element = global,
  options = {}
) => {
  const savedHandler = useRef();
  const { capture, passive, once } = options;

  useEffect(() => {
    savedHandler.current = handler;
  }, [handler]);

  useEffect(() => {
    const isSupported = element && element.addEventListener;
    if (!isSupported) {
      return;
    }

    const eventListener = (event) => savedHandler.current(event);
    const opts = { capture, passive, once };
    element.addEventListener(eventName, eventListener, opts);
    return () => {
      element.removeEventListener(eventName, eventListener, opts);
    };
  }, [eventName, element, capture, passive, once]);
};

export default useEventListener;

donavan's original code

그것을 분해합시다.

const useEventListener = (
  eventName,
  handler,
  element = global,
  options = {}
) => {
  const savedHandler = useRef();
  const { capture, passive, once } = options;

useEventListener에는 이벤트 이름과 핸들러 함수가 필요합니다. 저의 경우 찾고자 하는 이벤트는 keypress 이고 제가 만든 함수는 handlePanZoomModeSwitch 입니다.

useEventListener('keypress', handlePanZoomModeSwitch)

나는 단순히 키보드 v 또는 h 키가 눌렸는지 확인하는 것이므로 기본 요소global를 사용하는 것이 좋습니다.

four possible options 에도 불구하고 세 가지 옵션이 있습니다. 그러나 그들 중 어느 것도 내 요구에 맞지 않습니다.

  useEffect(() => {
    savedHandler.current = handler;
  }, [handler]);

savedhandler는 useRef() which is used to access DOM nodes and persist mutable values across re-renders에 할당됩니다. 우리의 경우 창에서 현재 DOM에 이미 연결된 상태를 잊어버리고 싶지 않습니다. 두 번째 useEffect() 매개변수가 [handler] 로 지정되었으므로 핸들러 기능이 변경될 때마다 구성요소가 자체적으로 다시 렌더링됩니다. 두 번째 useEffect() 매개변수가 지정되지 않은 경우 단순히 [] 와 같이 구성 요소는 구성 요소를 한 번만 렌더링합니다.

마지막 useEffect 후크는 길어 보이지만 그렇게 복잡하지는 않습니다. isSupported if 문은 요소가 존재하는지 그리고 해당 요소에 이벤트 리스너를 추가할 수 있는지 확인합니다.

  useEffect(() => {
    const isSupported = element && element.addEventListener;
    if (!isSupported) {
      return;
    }

    const eventListener = (event) => savedHandler.current(event);
    const opts = { capture, passive, once };
    element.addEventListener(eventName, eventListener, opts);
    return () => {
      element.removeEventListener(eventName, eventListener, opts);
    };
  }, [eventName, element, capture, passive, once]);

다음으로 eventListener 화살표 함수는 addEventListener에 대한 핸들러 함수 역할을 합니다. eventListener 함수는 발생하는 모든 이벤트를 지정한 핸들러 함수에 전달합니다.

Finally, the removeEventListener() is passed to prevent memory leaks, side-effects, and event collisions.

결론

useEventListener() 후크를 사용하면 웹 앱 요구 사항에 맞게 키를 쉽게 바인딩할 수 있습니다. 그곳에서 즐거운 시간을 보내세요!