[React] 초간단 모달창 띄우기

 

 

 

1. 모달창의 상태가 true면 나타나고, false면 사라지도록 해야 하기 때문에 useState 훅을 사용한다.

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

  {modalOpen && (
    <PurchaseModal
      handlePurchase={handlePurchase}
      header="정말로 구매하시겠습니까?"
    >
      장바구니의 모든 상품들이 삭제됩니다.
    </PurchaseModal>
  )}

 

2. 모달 안에 들어갈 텍스트들을 넘겨주었다. 모달 컴포넌트 안에서 텍스트를 바로 넣어도 된다.

 

3. 모달창 안에서 X박스나 버튼을 누르면 상태값을 false로 바꿔야 하기 때문에, setModalOpen을 실행하는 함수를 모달 컴포넌트에 넘겨준다.

  const handlePurchase = (isOpen: boolean) => {
    setModalOpen(isOpen);
  };

 

4. 넘겨준 텍스트를 넣고, 클릭 시 모달창이 닫히길 원하는 요소에 modalOpen 상태값을 false로 바꾸는 이벤트를 넣는다.

interface ModalType {
  handlePurchase: (isOpen: boolean) => void;
  header: string;
  children: React.ReactNode;
}

export const PurchaseModal = (props: ModalType) => {
  const { header, handlePurchase, children } = props;

  return (
    <Overlay />
    <div>
      <h2>{header}</h2>
      <p>{children}</p>
      <button onClick={() => handlePurchase(false)}>
        닫기
      </button>
    </div>
  );
};

 

 

 

 

 

✅ style

1. 모달 창을 띄우면 바깥의 요소들을 어둡게

const Overlay = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(26, 26, 26, 0.5);
  z-index: 999;
`;

2. 모달 창을 화면의 정 가운데에 위치하도록

  width: 450px;
  height: 150px;
  z-index: 1000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

 

 

결과 화면