[React] Event.stopPropagation()

event.stopPropagation()은 React에서 이벤트 전파를 중지하는 데 사용되는 메서드이다. 이벤트 전파는 이벤트가 부모 요소로 전달되는 과정을 의미하며 이벤트 전파를 중지하면 이벤트가 부모 요소로 전달되지 않는다.

const handleClick = (event) => {     event.stopPropagation(); };

MUI 의 Modal Component 를 사용하던 도중 버튼에서 해당 컴포넌트를 close 하려고 해도 상태값이 변경이 되지 않는 문제가 발생했다. 로그로 분석해보니 해당 이벤트가 버튼의 클릭이벤트로 전달되고 다시 부모 컴포넌트인 Modal 로 다시 전달되어 결국 상태값이 변경이 되질 않았다.