[React] ReactDOM 을 사용하여 팝업창 띄우기 - 떽떽대는 개발공부

2021.04.15 - [React] - [React] redux 를 이용하여 popup 창 구현하기 - 떽떽대는 개발공부

[React] redux 를 이용하여 popup 창 구현하기 - 떽떽대는 개발공부

 

 

오늘은 react-dom 을 사용하여 팝업창 생성을 해보도록 하자.

 

react 프로젝트가 생성될 때 하나의 돔이 생성되고 그 위에 view 가 그려진다.

따라서 팝업창을 생성하기 위해선 이미 펼져쳐 있는 dom 위에 새로운 dom 을 그려주어야 한다.

 

아래와 같이 dom 을 새로 생성해주자.

import ReactDom from 'react-dom';

const PopupDom = ({ children }) => {
    const el = document.getElementById('popupDom');
    return ReactDom.createPortal(children, el);
};

export default PopupDom;

 

popup 창을 띄울 페이지에서 state 를 통해 popup창 상태를 관리할 수 있도록 한다.

변경되는 state 값에 따라 popup 창을 보여줄 수 있도록 해보자.

생성될 팝업창에는 onClose 라는 props 를 전달하여 팝업창 내에서 props 값을 전달하면 팝업창을 닫을 수 있도록 제어할 수 있다.

import React, {Component} from 'react';
import PopupDom from './PopupDom';
import PopupContent from './PopupContent';

import './Style.css'

class Main extends Component {
    constructor(props){
        super(props);
        
        this.state = {
            isOpenPopup: false,
        }

        this.openPopup = this.openPopup.bind(this);
        this.closePopup = this.closePopup.bind(this);
    }

    openPopup(){
        this.setState({
            isOpenPopup: true,
        })
    }

    closePopup(){
        this.setState({
            isOpenPopup: false,
        })
    }

    render(){
        return(
            <div>
                <h2>Open Popup</h2>
                <div>
                    <button type="button"
                            id="popupDom"
                            onClick={this.openPopup}
                    >
                        Click
                    </button>
                    {this.state.isOpenPopup &&
                        <PopupDom>
                            <PopupContent onClose={this.closePopup}/>
                        </PopupDom>
                    }
                </div>
            </div>
        );
    }
}

export default Main;

 

실제 팝업으로 띄울 창을 생성한다.

import React, {Component} from 'react';

class PopupContent extends Component {
    render(){
        return(
            <div className="dimmed_layer_wrapper">
                <div className="full_layer">
                    <div className="common_alert"> 
                        <h2>This is Popup Title</h2>
                        <div>This is Popup Body</div>
                        <div>
                            <button type="button" onClick={this.props.onClose}>close</button>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default PopupContent;

 

여기서 css 설정을 아무것도 하지 않는다면 아래와 같이 팝업창이 버튼 안으로 생성되어 보인다.

사실 버튼 안에 팝업창이 생성된 것은 createdom 할 때 id 값을 버튼의 아이디 값으로 전달해서 그렇고,

버튼 말고 div 를 하나 더 만들어서 id 값을 popupDom 으로 준다면 아래처럼 버튼아래에 생성되지 않고,

div 를 기준으로 나타날 것이다.

나는 수정하기 귀찮으므로 그냥 버튼 안에서 생성 했다.

이제 css를 설정하여 팝업창의 모양을 만들어준다.

팝업창의 경계를 확실히 알기 위해 background-color 를 주었다.

.dimmed_layer_wrapper .full_layer {
    overflow:hidden;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    z-index:100;
    text-align:center;
    white-space:nowrap;
    font-size:0;
    display:inline-block;
    vertical-align:middle;
    height:100%;
    content:'';
}
.common_alert{
    z-index:2;
    position:relative;
    display:inline-block;
    vertical-align:middle;
    width:calc(100%-56px);
    min-height: 200px;
    max-height:100%;
    min-width: 200px;
    background-color:yellowgreen;
    white-space:normal;
    word-break:break-word;
    text-align:left;
    border-radius:10px;
    padding:30px;
    margin:auto;
    box-sizing:border-box;
    font-size: 16px;
}

 

이렇게 css 까지 적용하면 아래와 같이 팝업창 생성이 완료 되었다.

 

2021.04.15 - [React] - [React] redux 를 이용하여 popup 창 구현하기 - 떽떽대는 개발공부

[React] redux 를 이용하여 popup 창 구현하기 - 떽떽대는 개발공부