[React] Modal창 생성하기

모달창을 생성하기 위해 먼저 modals 폴더에 Modal jsx 파일을 생성해준다.

 

import React, { Component } from 'react'

class Modal extends Component {

constructor(props) {

super(props)

}

render() {

const { open, close } = this.props

return (

<>

{open ? (

<div className="taxBill_modal__background">

<div className="taxBill_modal__box">모달창입니다.</div>

</div>

) : (

<></>

)}

</>

)

}

}

export default Modal

 

위와 같이 props로 모달창을 제어하기 위한 toggle인 open과 open을 false로 바꿔 모달창을 사라지게 할 close 함수를 받아온다. 

open이 참일 경우에만 모달창이 나타난다.

 

this.state = {

modalOpen: false,

}

 

closeModal = () => {

this.setState({ modalOpen: false })

}

 

부모 컴포넌트에서는 모달창의 생성과 닫기를 제어할 state와 모달을 닫을 수 있는 함수를 만들어준다.

 

 

<Modal open={modalOpen} close={closeModal} />

 

이후 모달 컴포넌트를 생성하고 적절한 조건에 따라 modalOpen의 값을 true로 바꿔주면 모달 창이 나타나게 된다.

 

 

 

모달창을 제외한 주변 화면을 어둡게 하기 위해 모달창은 background div와 그 하위에 modal div로 구성한다.

 

background div는 position을 fix로 놓고 top, left, bottom, right를 모두 0으로 준 뒤 z-index에 가장 큰 값을 줌으로써 고정시킬 수 있다.

 

배경색을 어둡게 하기 위해

background: rgba(0, 0, 0, 0.3); 

위와 같은 css를 적용한다.

 

 

modal div는 position을 absolute로 준 뒤 적절한 위치를 선정하고 필요에 맞게 스타일링 해주면 된다.