TIL-44 React 모달 구현하기

// Main.js
const [showModal, setShowModal] = useState([false, false]);

  const openModal = (e, id) => {
    if (e.target.name === 'Edit') {
      setShowModal([false, true]);
      setReportId(id);
    } else {
      setShowModal([true, false]);
    }
  };
  const closeModal = () => {
    setShowModal([false, false]);
  };

// Main.js
<button
onClick={e => {
openModal(e, goods.report_id);}}
name="Edit">Edit</button>

<EditTab
showModal={showModal}
closeModal={closeModal}
reportId={reportId}
getData={getData}
></EditTab>

Main에서 모달창컴포넌트로 showModal, closeModal을 넘겨준다.
Edit 버튼을 누르게 되면 openModal 함수가 실행되면서 false->true로 바뀌면서 모 들창이 나오게 되는 원리이다.
따로 지우는 버튼은 안 만들었고 모달창 밖을 누르게 되면 꺼지게 만들고 싶었다.

// Edit.js
{showModal[1] ? (
        <Background onClick={closeModal}>
          <Section onClick={e => e.stopPropagation()}>
            <EditTabBox>...</EditTabBox>
          </Section>
        </Background>

Section onClick={e => e.stopPropagation()}
이 코드에서 {e => e.stopPropagation()} 이 함수를 제거하면 어딜 누르든 꺼지게 된다. 이유는 바로 이벤트 버블링 때문이다.
그렇기 때문에 위 코드처럼 이벤트를 막고 싶은 부분에 이벤트 버블링을 막아주는 함수를 넣어줘야 한다.