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