React의 이벤트 처리는 HTML 이벤트 속성과 어떻게 다른가요?

이렇게 답해 보세요 (핵심 답변)

HTML에서는 onclick 속성에 실행할 코드 문자열을 적지만, React JSX에서는 onClick처럼 camelCase 속성에 함수 참조를 직접 전달합니다. React는 브라우저별 차이를 정규화한 합성 이벤트(SyntheticEvent) 객체를 핸들러에 넘겨주며, 루트 컨테이너 수준에서 이벤트를 위임받아 효율적으로 처리합니다. 또한 기본 동작을 막을 때는 return false를 쓰는 대신 event.preventDefault()를 명시적으로 호출해야 하고, 전파 중단이 필요할 때는 event.stopPropagation()을 구분해 사용합니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 이벤트 핸들러에 호출 결과(handleClick())가 아닌 함수 참조(handleClick)를 넘겨야 렌더링 시점이 아니라 실제 사용자 이벤트 시점에 실행됩니다.
2. 브라우저 기본 동작 취소(preventDefault)와 상위 트리로의 이벤트 버블링 차단(stopPropagation)은 서로 다른 책임을 가집니다.

면접에서 자주 하는 실수

Portal을 사용해 DOM 위치를 다른 곳으로 옮겼더라도 React 이벤트는 물리적 DOM 트리가 아니라 논리적인 React 컴포넌트 트리를 따라 전파된다는 점을 놓치기 쉽습니다.