[React] onBlur/onFocus가 버블링되는 이유와 PrimeReact 메뉴 버그 해결기
1. 들어가며React는 네이티브 이벤트가 아닌 자체적으로 SyntheticEvent(합성 이벤트) 시스템을 사용한다.이 시스템은 브라우저 간 이벤트 차이를 추상화해 일관된 동작을 제공하지만,그 특성상 네이티브 환경에서는 버블링되지 않는 blur 이벤트가 버블링되어 문제가 생길 수 있다.실제로 최근 PrimeReact UI 라이브러리에서 이와 관련된 문제(issue#7924)를 경험했다.문제가 발생했던 구조는 "메뉴 컴포넌트 내부에서 삭제(x) 버튼을 가진 Chip 컴포넌트가 있는 구조"이다. 의도한대로라면 (x) 버튼을 클릭했을 때, 해당 Chip 컴포넌트가 삭제되어야 한다.하지만 왜인지 삭제 버튼(x)을 여러 번 클릭해야만 삭제 이벤트가 발생하는 버그가 발생했다...! 이 문제의 원인을 추적해보니..
2025. 5. 11.
