Modal Page (이벤트 버블링 관련)

const Section = () => {
  const [modalOpen, setModalOpen] = useState(false);

  const imagesArr = [
    "/img/1.png",
    "/img/2.png",
    "/img/3.png",
    "/img/4.png",
    "/img/5.png",
    "/img/6.png",
    "/img/7.png",
    "/img/8.png",
  ];

  const showModal = () => {
    setModalOpen(true);
  };

  return (
    <>
      <section className="main-section">
        {imagesArr.map((image, index) => (
          <div key={index} className="image-wrapper" onClick={showModal}>
            <img src={image} alt={`image${index}`} />
            {modalOpen && <Modal setModalOpen={setModalOpen} />}
          </div>
        ))}
      </section>
    </>
  );
};

function Modal({ setModalOpen, id, title, content, writer }) {
  const closeModal = () => {
    setModalOpen(false);
  };

  return (
    <div className={styles.container}>
      <button
        className={styles.close}
        onClick={e => {
          e.stopPropagation(); // 이벤트 버블링을 막아줌
          closeModal();
        }}
      >
        <span>X</span>
      </button>
    </div>
  );
}

 

modal을 닫으려고 x를 눌렀을때 modal이 닫히지 않아서 당황했다..  🫠🫠🫠

이유를 찾아보니까  x를 눌렀을때 closeModal 함수가 실행되면서 modalOpen의 값이 false로 바뀌게 되는데

이때 부모요소인

<div key={index} className="image-wrapper" onClick={showModal}>

이 div의 onClick showModal 함수가 실행되면서 modalOpen의 값이 true가 되어버려서 닫히지 않던 것이다..

이를 e.stopPropagation()로 해결할 수 있었다.

 

 

---

 

e.stopPropagation() 메서드는 Event 및 버블링 단계에서 현재 이벤트의 추가 전파를 방지합니다.

e.stopPropagation() 메서드는 이벤트 전파를 중지시켜 상위요소로 전파되지 않도록 합니다.

 

 

<div onClick={() => console.log('div clicked')}>
  <button onClick={() => console.log('button clicked')}>Click me</button>
</div>

 

위 코드는 button을 클릭하면 'button clicked' 메시지와 함께 div요소의 클릭 이벤트도 함께 발생한다.

이는 버블링 방식으로 이벤트가 전파되기 때문이다.

 

 

<div onClick={() => console.log('div clicked')}>
  <button onClick={(event) => {
    event.stopPropagation();
    console.log('button clicked');
  }}>Click me</button>
</div>

 

위 코드는 button을 클릭하면 'button clicked' 메시지만 출력되고 div요소의 클릭 이벤트는 발생하지 않는다.