이벤트 위임 관련 질문드려요!
222
작성한 질문수 13
안녕하세요!
이벤트 위임이란 이벤트 버블링을 이용하여 상위 태그에 이벤트 핸들러를 할당하여 하위 태그에서 중복되는 이벤트들을 없앨 수 있다. 이 과정에서 원치 않은 이벤트 버블링를 막기 위해서는 event.stopPropagation() 함수를 사용해야 한다. 라고 이해했습니다.
이벤트 위임 관련해서 구글링 해보니, 구현 방식에 있어서 자바스크립트와 리액트에서 차이가 있다고 보았는데 자료들이 부정확하고 이해하기 어려워서 질문드립니다. 리액트와 자바스크립트에서 이벤트 버블링 구현시 어떤 차이가 있으며 그 이유와 원리에 대해 설명 부탁드립니다..!
항상 좋은 강의 감사드립니다
이벤트 위임 관련 아래 링크 첨부합니다.
https://github.com/facebook/react/issues/13635
https://github.com/facebook/react/issues/13625
답변 1
0
안녕하세요 asdqqq님, 인프런 AI 인턴이에요.
이벤트 위임에 대한 구현 방식은 자바스크립트와 리액트에서 조금 차이가 있습니다.
자바스크립트에서는 이벤트 버블링을 이용하여 상위 태그에 이벤트 핸들러를 할당하고, 하위 태그에서 발생하는 이벤트들이 상위 태그로 버블링되어 상위 태그의 이벤트 핸들러가 호출되도록 합니다. 이때, event.stopPropagation() 함수를 사용하여 원치 않은 이벤트 버블링을 막을 수 있습니다.
하지만 리액트에서는 컴포넌트 기반으로 동작하기 때문에 이벤트 버블링을 활용한 직접적인 이벤트 위임이 필요하지 않습니다. 리액트에서는 부모 컴포넌트에 이벤트 핸들러를 할당하고, 자식 컴포넌트에서 발생하는 이벤트가 부모 컴포넌트로 전파됩니다. 이때 컴포넌트 계층 구조와 상태(state)를 활용하여 이벤트 핸들링을 처리합니다.
위의 링크들을 통해 리액트 이슈들을 참고하실 수 있지만, 일반적으로 리액트에서는 이벤트 위임과 관련된 기능을 제공하고 있지 않습니다. 대신, 이벤트 위임이 필요한 경우 상위 컴포넌트에서 자식 컴포넌트로 이벤트 핸들러를 전달하고, 해당 이벤트 핸들러에서 필요한 동작을 처리하는 방식으로 구현합니다.
요약하자면, 자바스크립트에서는 이벤트 위임을 이용하여 이벤트 버블링을 처리하고, 리액트에서는 컴포넌트 계층 구조와 상태를 활용하여 이벤트 핸들링을 처리합니다.
더 자세한 내용은 리액트 공식 문서나 리액트 관련 자료를 참고하시면 될 것 같습니다. 감사합니다!
fetchBoardsOfMine, fetchBoardsCountOfMine 에러 문의드립니다
0
36
1
댓글 기능 구현 중 질문드립니다.
0
66
1
쿠폰코드 발급
0
132
2
example 서버 플레이그라운드, API 접속 모두 안됩니다.
0
86
2
문의드립니다!! ㅠㅠ
0
101
2
graphql 백엔드 서버가 포폴용 빼곤 접속이 안됩니다.
0
76
2
_app.js 작성 이후로 에러가 발생하네요
0
93
2
학습자료
0
70
2
학습자료가 안열립니다.
0
49
2
플레이 그라운드 퀴즈 문제 질문이 있습니다.
0
59
0
기존강의 구매자, 업데이트 끝인가요?
0
109
3
업데이트 버전 수강
0
88
2
완벽한 프론트엔드
0
136
2
나만의 쇼핑몰 샘플 페이지 접속 확인부탁드립니다.
0
81
1
graphql 접속이 안됩니다.
0
100
2
const, let 사용 질문 드립니다.
0
70
2
싸이월드 만들기 1탄 피드백 부탁드립니다.
0
122
2
회원가입 과제 피드백 부탁드립니다.
0
80
2
styled.span / styled.input "CSS 자동완성"
0
47
1
쿠폰 발급 관련
0
166
2
서버 502 error
0
247
2
쿠폰 다시 부탁드려도 될가여?
0
140
2
a태그 패딩했을때 왜 크기가 줄어들지 않고 늘어나나요
0
184
2
2분 44초 질문
0
131
3