[TIL] react-styled-component 에서 이벤트 버블링 막기

이벤트 버블링

부모에게 전달된 이벤트는 자식 요소에게도 전달된다.

자식에서 이벤트 버블링을 막기 위해서는 stopPropagation 을 지정해주어야 한다.

return (
    <>
      <ModalContainer>
        <ModalBtn onClick={openModalHandler}
          {isOpen ? "Opend!" :"Open Modal"}
        </ModalBtn>
        {isOpen && <ModalBackdrop onClick={openModalHandler}>
          <ModalView onClick={(event) => event.stopPropagation()}></ModalView>
          </ModalBackdrop>}
      </ModalContainer>
    </>
  );
};