인프런 커뮤니티 질문&답변
작성한 질문수
이벤트 위임 관련 질문드려요!
작성
·
169
·
수정됨
0
안녕하세요!
이벤트 위임이란 이벤트 버블링을 이용하여 상위 태그에 이벤트 핸들러를 할당하여 하위 태그에서 중복되는 이벤트들을 없앨 수 있다. 이 과정에서 원치 않은 이벤트 버블링를 막기 위해서는 event.stopPropagation() 함수를 사용해야 한다. 라고 이해했습니다.
이벤트 위임 관련해서 구글링 해보니, 구현 방식에 있어서 자바스크립트와 리액트에서 차이가 있다고 보았는데 자료들이 부정확하고 이해하기 어려워서 질문드립니다. 리액트와 자바스크립트에서 이벤트 버블링 구현시 어떤 차이가 있으며 그 이유와 원리에 대해 설명 부탁드립니다..!
항상 좋은 강의 감사드립니다
이벤트 위임 관련 아래 링크 첨부합니다.
https://github.com/facebook/react/issues/13635
답변 1
0
안녕하세요 asdqqq님, 인프런 AI 인턴이에요.
이벤트 위임에 대한 구현 방식은 자바스크립트와 리액트에서 조금 차이가 있습니다.
자바스크립트에서는 이벤트 버블링을 이용하여 상위 태그에 이벤트 핸들러를 할당하고, 하위 태그에서 발생하는 이벤트들이 상위 태그로 버블링되어 상위 태그의 이벤트 핸들러가 호출되도록 합니다. 이때, event.stopPropagation() 함수를 사용하여 원치 않은 이벤트 버블링을 막을 수 있습니다.
하지만 리액트에서는 컴포넌트 기반으로 동작하기 때문에 이벤트 버블링을 활용한 직접적인 이벤트 위임이 필요하지 않습니다. 리액트에서는 부모 컴포넌트에 이벤트 핸들러를 할당하고, 자식 컴포넌트에서 발생하는 이벤트가 부모 컴포넌트로 전파됩니다. 이때 컴포넌트 계층 구조와 상태(state)를 활용하여 이벤트 핸들링을 처리합니다.
위의 링크들을 통해 리액트 이슈들을 참고하실 수 있지만, 일반적으로 리액트에서는 이벤트 위임과 관련된 기능을 제공하고 있지 않습니다. 대신, 이벤트 위임이 필요한 경우 상위 컴포넌트에서 자식 컴포넌트로 이벤트 핸들러를 전달하고, 해당 이벤트 핸들러에서 필요한 동작을 처리하는 방식으로 구현합니다.
요약하자면, 자바스크립트에서는 이벤트 위임을 이용하여 이벤트 버블링을 처리하고, 리액트에서는 컴포넌트 계층 구조와 상태를 활용하여 이벤트 핸들링을 처리합니다.
더 자세한 내용은 리액트 공식 문서나 리액트 관련 자료를 참고하시면 될 것 같습니다. 감사합니다!