클론코딩(airbnb) - 모달창 구현방법

패키지를 사용하지 않고 모달창을 구현하는 방법도 있지만 6일이라는 시간내에 프로젝트를 끝내기엔 빨리빨리 만드는게 중요하기에 패키지를 사용하였다.

 

1. 패키지를 추가해준다.

yarn add react-modal 

 

2. 버튼을 누르면 모달창이 나오는 방식으로 구현하기 위해 버튼 컴포넌트에서 시작하였다.

const Hbutton = () => {   // 모달 기본 세팅 true, false로 열고 닫아주기 위해 변수 지정   const [firstModalStatus, setFirstModalStatus] = React.useState(false);   // 버튼 클릭 시 모달창 활성화 시키기 위한 함수(위 변수를 true로 변환)   const firstModalOpen = () => {     setFirstModalStatus(true);   };   return (     <React.Fragment>       <div>         <Container onClick={firstModalOpen}></Container>         {firstModalStatus && ( // 이 부분 은희님한테 질문!           <Hmodal             modal={firstModalStatus}             setFirstModalStatus={setFirstModalStatus}           ></Hmodal>         )}       </div>     </React.Fragment>   ); };

 

3. 버튼을 눌렀을때 띄워줄 모달창을 만든다.

import React from "react"; import styled from "styled-components"; import Modal from "react-modal"; import "../shared/Hmodal.css"; const Hmodal = (props) => {   // 모달창 열렸는지 닫혔는지 정해준다   const [hModal, setHModal] = React.useState(props.modal ? true : false);   // 모달창을 닫으면 header의 state도 false로 바꿔주기   const modalOff = () => {     setHModal(false);     props.setFirstModalStatus(false); // Hbutton의 변수 값도 바꿔줘야 함   };     return (     <React.Fragment>       <div>         <Modal           isOpen={hModal} // isOpen={true}로 모달창을 열 수 있다 (필수 요소)           ariaHideApp={false} // appElement가 숨겨져야 하는지의 여부           onRequestClose={modalOff} // 모달창 이외의 부분이나 ESC를 누를 경우 모달창을 끈다.           className="Modal"           overlayClassName="Overlay"         >           <UserModal>             <UserModalBtn>회원가입</UserModalBtn>             <UserModalBtn>로그인</UserModalBtn>           </UserModal>         </Modal>       </div>     </React.Fragment>   ); };   export default Hmodal;

밑 부분의 UserModal과 UserModalBtn은 styled-components를 통해 임의로 만들어 준것이니 모달창 기능과는 무관하다. (포스트에선 css부분을 다 제외 하였다)

 

또 모달창에 css를 적용하기 위해선 inline style로도 적용이 가능하지만 코드의 가독성을 위해 이번엔 css파일을 따로 작성해 만들어 보았다. 

공식문서를 참고 해보니 className으로 모달에 적용될 css를 작성 가능하고,

overlayClassName으로 모달창 밖 오버레이 부분의 css를 작성 가능하다.