stopPropagation

onClick={(e) => e.stopPropagation()}

 

DOM 이벤트 처리는 다음과 같이 발생한다.

 

자식 요소 -> 부모 요소 -> 상위 요소 -> document

 

이벤트가 발생하면 다음과 같은 순서로 전달된다.

 

이러한 흐름을 막기 위해 사용하는 함수가 stopPropagation()이다.

 

이벤트를 막고자 하는 곳에 사용하면 이벤트 처리가 안된다.

 

모달에서 모달 내용을 클릭했을 때는 닫히지 않지만

밖을 클릭했을 때 닫히도록 만드는 곳에서 사용한다.