React Popup(팝업) 생성하기

1. 팝업 Component 생성

 - props로 해당 Component에 값을 전달

 - 여기서는 onClosed 함수를 전달하여 뒤로가기 버튼을 눌렀을때 이벤트를 전달해줍니다.

 

export default function PopupTodo(onClosed) {
  return (
    <PageContainer>
      <TitleContainer>
        <BackBtn onClick={onClosed} />
        <Title title="팝업 Todo">팝업 Todo</Title>
      </TitleContainer>
      <PageContent paddingTop={20}>
        <ListStyled>
          <li>할일1</li>
          <li>할일2</li>
        </ListStyled>
      </PageContent>
    </PageContainer>
  );
}

 

2. 부모 Component에서 팝업 제어

 - state를 사용하여 팝업 Component를 제어 합니다.

 - true : mount, false : unmount

 - onClosed 이벤트를 전달받아 해당 state를 false로 변경합니다.

 

export default function HomePage() {
    const [isShowPopup, setShowPopup] = useState(false);
  return (
    <PageContainer>
      <PageContent>
        <div>
          <RoundButton
            onClick={() => {
              setShowPopup(true);
            }}
            data-testid="popupButton"
          >
            팝업
          </RoundButton>
        </div>
      </PageContent>
      {isShowPopup && (
        <PopupTodo
          onClosed={() => {
            setShowPopup(false);
          }}
        />
      )}
    </PageContainer>
  );