React 17 업그레이드 후 이벤트 위임 변경사항 정리

배경

레거시 프로젝트를 React 17로 업그레이드했다. 기능상 큰 변화는 없지만, 이벤트 시스템이 내부적으로 변경되어 정리가 필요했다.

변경된 이벤트 위임 방식

React 16까지는 모든 이벤트 핸들러가 document 레벨에 등록되었다. React 17부터는 React 트리가 렌더링되는 root DOM 노드에 등록된다.

// React 16
document.addEventListener(...)

// React 17
rootNode.addEventListener(...)

실제 문제 해결

우리 프로젝트는 일부 레거시 jQuery 코드가 남아있었다. 기존에는 e.stopPropagation()을 해도 document 레벨에서 이벤트가 겹치는 문제가 있었다.

// jQuery 코드
$(document).on('click', '.legacy-modal', function(e) {
  e.stopPropagation();
  // React 컴포넌트의 클릭 이벤트도 함께 발생하는 버그
});

React 17 업그레이드 후 이 문제가 자연스럽게 해결되었다. 이벤트 위임 레벨이 분리되면서 propagation이 의도대로 동작했다.

Breaking Changes 체크리스트

실제로는 breaking change가 거의 없었다:

• onScroll 이벤트가 더 이상 버블링되지 않음 (원래 DOM 스펙대로)
• onBlur, onFocus가 네이티브 focusin, focusout으로 변경
• Capture phase 이벤트 리스너가 실제 브라우저 capture phase 사용

우리 코드베이스에서는 영향받는 부분이 없었다.

마이그레이션

npm install [email protected] [email protected]

테스트 돌려보고 배포 완료. 체감상 차이는 없지만 향후 React 18 업그레이드를 위한 준비 단계로 의미가 있다.