[React] 모달 바깥영역 클릭 닫기

<ModalWrapper onClick={closeModal} >
  <InnerModal>
    <button type="button" onClick={toggleEdit}>수정</button>
  </InnerModal> 
</ModalWrapper>

모달의 부모 영역에 닫기 이벤트를 주입하면 내부 버튼을 눌렀을 때도 모달이 닫힌다.

이벤트 전파와 관련된 현상으로, 지금의 경우는 상위 요소에서 하위 요소로 이벤트가 전파되는 이벤트 캡처 때문이다. 반대로 하위 요소 클릭 시 상위 요소로 이벤트가 전파되는 경우를 이벤트 버블링이라고 한다.

이러한 이벤트 전파를 방지하고 싶다면 이벤트의 속성 중 stopPropagation을 사용한다. 기본 동작, <a> 태그의 링크 이동, <form> 태그의 리로드 등을 제외한 이벤트 전파를 방지한다.

기본 동작 방지는 preventDefault를 사용한다.

<ModalWrapper onClick={closeModal} >
  <InnerModal onClick={(e) => e.stopPropagation()} >
    <button type="button" onClick={toggleEdit}>수정</button>
  </InnerModal> 
</ModalWrapper>

InnerModal 영역 내에서는 closeModal이 동작하지 않는다.

참고
MDN - Event: stopPropagation() method
stackoverflow - React close modal on click outside
캡틴판교 - 이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지