리액트 요소가 중첩된 경우 이벤트 처리

리액트 요소가 중첩된 경우 이벤트 처리

버튼 위에 버튼이 있어 겹쳐진 부분의 버튼을 눌렀을 때 두 버튼의 이벤트가 둘 다 발생하는 상황

해결방법

e.preventDefault();
e.stopPropagation();

• 이벤트의 기본동작 방지을 해주는 것이다
• e.preventDefault()는 고유 동작을 중단시키고,
• e.stopPropagation()은 상위 엘리먼트들로의 이벤트 전파를 중단 시킨다.