React에서 이벤트 위임을 사용해야 하나요?

이벤트 위임이란 무엇입니까?

이벤트 위임은 Javascript 세계의 성능 최적화 방법입니다. 1000개의 목록 항목이 있는 정렬되지 않은 목록<ul>이 있고 목록 항목을 클릭할 때마다 작업을 수행하려고 한다고 가정해 보겠습니다. 이벤트 위임 방식을 사용하면 각 하위 항목에 하나의 이벤트 리스너를 추가하는 대신 상위 항목에 1개의 이벤트 리스너만 추가합니다<ul>. 깔끔한 접근 방식입니다. 이에 대한 자세한 내용을 읽을 수 있습니다here.

React에서 이벤트 위임을 사용해야 하나요?

짧은 대답은 "아니오"입니다. 눈에 띄는 성능상의 이점은 없습니다. 그 이유는 React가 이미 내부적으로 이 성능 최적화를 수행하고 있기 때문입니다. 저를 못 믿으시면 Dan Abramovhere의 답변을 확인하십시오.

성능 벤치마크

나는 이것을 직접 테스트하고 싶었다. 그래서 3000개의 버튼이 있는 테스트 프로젝트를 만들었습니다. 버튼을 클릭하면 부모 컨테이너에서 상태가 "선택됨"으로 변경되고 배경색이 변경됩니다.

여기에서 두 가지 데모를 확인할 수 있습니다. 소스 코드를 계속 읽으십시오.

이벤트 위임 없음: https://test-event-delegation-off.now.sh/

이벤트 위임 포함: https://test-event-delegation-on.now.sh/

이벤트 위임 없음 - 3000개의 이벤트 리스너

각 버튼에 onClick 핸들러를 연결합니다.

// selectedItems = new Set([1, 2, 3])
// ids = [0, 1, 2, ..., 2999]

{ids.map((id) => (
  <FancyButton
    key={id}
    id={id}
    label={id}
    isSelected={selectedItems.has(id)}
    onClick={() => handleClick(id)}
  />
))}

전체 소스 코드here를 참조하십시오.

이벤트 위임 사용 - 1 이벤트 리스너

여기서는 상위 div에 하나의 핸들러onClick만 연결합니다.

const handleClick = (event) => {
  // Get id from button element
  const id = event.target.id;
  setSelectedItems((prevState) => new Set([...prevState, id]));
};


<div className="container" onClick={handleClick}>
  {ids.map((id) => (
    <FancyButton
      key={id}
      id={id}
      label={id}
      isSelected={selectedItems.has(id)}
    />
  ))}
</div>