모달은 처음인데?

<div>

<button onClick={openModal}>모달 열기</button>

{isOpen && ( <div className="modal-overlay" onClick={closeModal}>

<div className="modal-content" onClick={(e) => e.stopPropagation()}>

<span className="close" onClick={closeModal}>&times;</span>

<p>모달 내용이 여기에 들어갑니다.</p> 

</div>

 </div> )}

 </div>

 

state로 불린값 관리하면서 모달창이 뜨도록 구현.

개발에 관심 갖은 이후로 여러 프로젝트를 했지만 모달은 첨 써보는 듯?

그래서 대강 이런 내용 이였구나 올려 둠.

 

stopPropagation()

stopPropagation() 메서드는 현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지.

전파를 방지해도 이벤트의 기본 동작은 실행되며

 이렇게 하면 모달 내부를 클릭했을 때 모달이 닫히지 않고,

만약 stopPropagation()을 사용하지 않고 모달 내부를 클릭하면 이벤트가 모달 외부로 전파되어 모달이 닫히게 된다고 합니다.

 

  &times;

닫기창 x 표시