React 17 RC에서 달라진 이벤트 위임 방식

문제 상황

회사 어드민 페이지는 오래된 jQuery 기반 코드와 새로 작성한 React 컴포넌트가 공존하고 있다. 최근 React 모달 내부에서 발생한 이벤트가 jQuery의 $(document).on() 핸들러에 의도치 않게 캐치되는 버그가 있었다.

// jQuery 레거시 코드
$(document).on('click', '.legacy-button', function(e) {
  // React 모달의 버튼도 이 핸들러를 타버림
});

e.stopPropagation()으로 임시 처리했지만 근본적인 해결은 아니었다.

React 17의 변경사항

React 17 RC를 테스트해보니 이벤트 위임 지점이 변경되었다.

• React 16 이하: 모든 이벤트를 document에 위임
• React 17: 이벤트를 React 트리가 렌더링된 root DOM 컨테이너에 위임

const rootNode = document.getElementById('root');
ReactDOM.render(<App />, rootNode);
// 이제 이벤트는 rootNode에 붙는다

실제 영향

개발 환경에 React 17 RC를 적용해봤다. jQuery와 React 이벤트가 분리되면서 이전 버그가 자연스럽게 해결되었다. 마이크로 프론트엔드처럼 여러 React 앱을 한 페이지에 마운트하는 경우에도 유리할 것으로 보인다.

다만 Breaking Change는 거의 없어서 마이그레이션 부담은 적다. 팀 내에서 논의 후 정식 릴리즈되면 바로 적용하기로 했다.

참고

• React 17 RC 발표에서는 "No New Features"를 강조하고 있다
• 주로 차기 버전을 위한 기반 작업에 집중
• event pooling도 제거되어 비동기 이벤트 처리가 자연스러워진다