React(41) 리액트 훅 + 타입스크립트 - 모달창 만들기

updated 11/19/22

학습만 해봤던 타입스크립트를 사용하여 실무에 적용하는 중이다.

역시 세상에 쉬운일은 없다는 걸 새삼 느끼지만 차근차근해나가면 안될일은 없다. 자 그럼 작업해보자.

 

 

 

오늘도 새발자는 지식공유를 위해 열심히 달립니다.

---

React(41) 리액트 훅 + 타입스크립트 - 모달창 만들기

리액트 훅과 타입스크립트로 모달창을 구현해볼 것이다.

일단 필요한 준비물은 부모 컴포넌트인 OrderList와 모달창의 역할을 할 자식 컴포넌트인 OrderModal 이다.

 

 

OrderList.tsx 부모컴포넌트

일단 isShow  상태변수를 선언하고 Boolean 값을 준다. 이게 모달을 보여주는 스위치가 될 것이다.

요청서를 열었다 닫았다 할 function 인 openReq() 와 closeReq() 를 만들어주자

import { ReactElement, useState, useEffect } from 'react';
import OrderModal from '../order/OrderModal';


const OrderList = (): ReactElement => {
  const [isModal, setIsModal] = useState<boolean>(false);
  
  function openModal() {
    setIsModal(true);
  }

  function closeModal() {
    setIsModal(false);
  }
  
  return (
    <div>
      <button className="modal_btn" onClick={openModal}>
        모달창 보기
      </button>
      {isModal && 
      	<OrderModal open={isModal} close={closeModal} />
      }
    </div>
  )
}

export default OrderList;

 

 

OrderModal.tsx 자식컴포넌트

import React, { ReactElement } from 'react';
import css/order/orderModal.scoped.css';

interface props {
  open: boolean;
  close: (v:boolean) => void;
}

const OrderModal = (props: props): ReactElement => {
  const { open, close } = props; // props 로 함수를 받아주자

  return (
    <div className="modal-wrap">
      <div className={open ? 'bg' : ''} />
      <div className={open ? 'modal active' : 'modal'}>
        <div className="area">
          <button className="close" onClick={close}> x </button>
          <p>모달 타이틀</p>
          <p>모달 내용</p>          
        </div>
      </div>
    </div>
  );
};
export default OrderModal;

 

CSS

모달배경 어둡게 만들기 

.bg {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 100;
}

 

결과 화면

[ 모달창 보기 ] 버튼을 클릭하면 모달창이 뜨면서 잘 나온다.