Modal 컴포넌트 밖 또는 X버튼 눌렀을 때 닫기

James·2021년 6월 27일
Reactmodal
0

자주쓰는 코딩패턴

목록 보기
1/1
  1. Modal 컴포넌트 밖에 해당하는 DarkBackGround 컴포넌트 클릭 시 닫히도록 onClick 이벤트 설정한다.
  2. Modal창에 해당하는 DialogBlock 에서는 부모 컴포넌트의 onClick 이벤트에 영향을 받지 않기 위해 onClick 이벤트로 e => e.stopPropagation() 을 통해 클릭해도 닫힘 이벤트가 발생하지 않는다.
  3. X버튼에 해당하는 CloseBtn 컴포넌트에는 onClick 이벤트로 닫힘을 설정한다.
    return (
    <DarkBackground onClick={close}>
      <DialogBlock onClick={e => e.stopPropagation()}>
        <DialogHeader>
          <DialogTitle>{headerText}</DialogTitle>
          <CloseBtn src={closeImg} onClick={close} />
        </DialogHeader>
        <DialogBody>
          <ProductPhoto src={photo} />
          <ProductTitle>{title}</ProductTitle>
        </DialogBody>
        <ModalCheerUpBtn onClick={showMsg}>{btnText}</ModalCheerUpBtn>
        {isClicked ? (
          <MsgBox>
            <Msg>[{title}]</Msg>
            <CheerUpComp>응원완료</CheerUpComp>
          </MsgBox>
        ) : null}
      </DialogBlock>
    </DarkBackground>
  );
profile
James
웹개발자 James 입니다.

0개의 댓글