React에서는 이벤트 버블링이 발생하지 않나요?

2022년 10월 14일조회 214

javascript를 배울 때 부모, 자식 컴포넌트가 같은 이벤트를 핸들링하고 자식 컴포넌트의 이벤트가 실행되면 버블링이 발생하는걸로 알고있습니다. ex) p태그를 클릭하면 p -> div -> form으로 alert이 세번 실행됨. <form onclick="alert('form')">FORM <div onclick="alert('div')">DIV <p onclick="alert('p')">P</p> </div> </form> React에서는 왜 이벤트 버블링이 발생하지 않나요? (몇 번 e.stopPropagation으로 막아주긴 했는데 기본적으로는 동작하지 않는 것 같아요) React로 실무를 하고있지만 한번도 이벤트 버블링을 신경쓴적이 없어서 문득 궁금해졌네요.

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 1

성원님의 프로필 사진

저도 예전에 궁금해서 찾아봤는데 카카오 기술 블로그에서 관련된 내용의 글을 발견해서 공유드립니다. https://fe-developers.kakaoent.com/2022/220908-react-event-and-browser-event/ 간단히 요약해보면 - 리액트 이벤트는 브라우저 이벤트를 래핑한 이벤트임 - 리액트에서 정의한 이벤트는 리엑트의 root에 붙음 - 리액트에서 정의한 이벤트가 root에 붙기 때문에 리액트 JSX 태그에 on~ 으로 작성한 이벤트들은 버블링을 타지 않음 (다 한곳에 있기 때문에, 계층이 발생하지 않는다) 질문자분이 남겨주신 '가끔씩 e.stopPropagation으로 버블링을 막아줬던 경우'는 window에 이벤트 리스너를 직접 달아주는 등 계층으로 이벤트가 발생했던 상황이라고 추론해볼 수 있겠네요. 혹시 틀린 부분이 있으면 수정 부탁드립니다:)

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직 개발자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

기술, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!