React에서 모달 만들기.

이 튜토리얼에서는 React에서 모달을 빌드할 것입니다. 아래는 데모입니다.

전제 조건

다음은 이 자습서를 수행하는 데 필요한 전제 조건입니다.

React에 대한 지식(최소한 state 및 props에 대한 기본적인 이해가 있어야 함).

PC에 Node JS 설치.

create-react-app이 PC에 설치되었습니다.

초기 설정

프로젝트의 루트 디렉터리에서 아래 명령을 실행하여 프로젝트를 초기화하면 프로젝트를 시작하는 데 필요한 라이브러리와 도구가 설치됩니다.

create-react-app basic-modal

구성 요소 구축

구성 요소를 생성하거나 코드를 작성하기 전에 아래 단계에 따라 원하지 않는 파일을 삭제하고 프로젝트에 필요한 파일도 생성하십시오.

src 폴더에서 app.css, app.test.js, logo.svg 및 registerServiceWorker.js 파일을 삭제합니다.

src 디렉토리에 폴더를 만들고 이름을 구성 요소로 지정합니다.

구성 요소 폴더에서 Modal이라는 다른 폴더를 만듭니다.

Modal 폴더에서 Modal.js 및 Modal.css라는 두 개의 파일을 만듭니다.

이렇게 하면 프로젝트 구조가 다음과 유사해야 합니다.




Modal.js

구성 요소 폴더에서 Modal.js 파일을 열고 다음 코드를 추가합니다.

import React from 'react';

import './Modal.css';

const modal = (props) => {
    return (
        <div>
            <div className="modal-wrapper"
                style={{
                    transform: props.show ? 'translateY(0vh)' : 'translateY(-100vh)',
                    opacity: props.show ? '1' : '0'
                }}>
                <div className="modal-header">
                    <h3>Modal Header</h3>
                    <span className="close-modal-btn" onClick={props.close}>×</span>
                </div>
                <div className="modal-body">
                    <p>
                        {props.children}
                    </p>
                </div>
                <div className="modal-footer">
                    <button className="btn-cancel" onClick={props.close}>CLOSE</button>
                    <button className="btn-continue">CONTINUE</button>
                </div>
            </div>
        </div>
    )
}

export default modal;

모달 구성 요소에는 다음 세 가지props가 있습니다.

show - 모달을 표시해야 하는지 여부를 나타내는 부울 값입니다.

닫기 - 취소 버튼을 클릭하면 모달을 닫는 기능

children - 모달의 내용으로 모달 구성 요소의 여는 태그와 닫는 태그 사이에 전달됩니다.

모달 구성 요소는 모달의 내용을 구성 요소의 자식으로 받는 기능적 구성 요소입니다. 모달 바닥글에는 클릭 시 모달을 닫는 기능을 실행하는 버튼도 포함되어 있습니다. 이 함수는 모달 구성 요소에 소품으로 전달됩니다. modal-wrapper div의 인라인 스타일에는 show props의 부울 값에 따라 모달의 가시성 상태 값을 설정하는 조건문이 포함되어 있습니다.


모달.css

모달 구성 요소에 스타일을 추가하려면 Modal.css 파일에 다음 코드를 추가합니다.

.modal-wrapper {
    background: white;
    border: 1px solid #d0cccc;
    box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2), 0 7px 20px 0 rgba(0,0,0,0.17);
    margin: 100px auto 0;
    transition: all .8s;
    width: 60%;
}

.modal-header {
    background: #263238;
    height: 40px;
    line-height: 40px;
    padding: 5px 20px;
    text-align: right;
}

.modal-header h3 {
    color: white;
    float: left;
    margin: 0;
    padding: 0;
}

.modal-body {
    padding: 10px 15px;
    text-align: center;
}

.modal-footer {
    background: #263238;
    height: 35px;
    padding: 15px;
}

.close-modal-btn {
    color: white;
    cursor: pointer;
    float: right;
    font-size: 30px;
    margin: 0;
}

.close-modal-btn:hover {
    color: black;
}

.btn-cancel, .btn-continue {
    background: coral;
    border: none;
    color: white;
    cursor: pointer;
    font-weight: bold;
    outline: none;
    padding: 10px;
}

.btn-cancel {
    background-color: #b71c1c;
    float: left;
}

.btn-continue {
    background-color: #1b5e20;
    float: right;
}

.back-drop {
    background-color: rgba(48, 49, 48, 0.42);
    height: 100%;
    position: fixed;
    transition: all 1.3s;
    width: 100%;
}

.open-modal-btn {
    margin: 15px;
    padding: 10px;
    font-weight: bold;
}

App.js

import React, { Component } from 'react';

import Modal from './components/Modal/Modal';

class App extends Component {

    constructor() {
        super();

        this.state = {
            isShowing: false
        }
    }

    openModalHandler = () => {
        this.setState({
            isShowing: true
        });
    }

    closeModalHandler = () => {
        this.setState({
            isShowing: false
        });
    }

    render () {
        return (
            <div>
                { this.state.isShowing ? <div onClick={this.closeModalHandler} className="back-drop"></div> : null }

                <button className="open-modal-btn" onClick={this.openModalHandler}>Open Modal</button>

                <Modal
                    className="modal"
                    show={this.state.isShowing}
                    close={this.closeModalHandler}>
                        Maybe aircrafts fly very high because they don't want to be seen in plane sight?
                </Modal>
            </div>
        );
    }
}

export default App;

App.js 파일에는 다음과 같은 두 가지 사용자 지정 함수가 포함되어 있습니다.

openModalHandler() - isShowing의 상태를 true로 설정하여 모달을 여는 함수입니다.

closeModalHandler() - isShowing의 상태를 false로 설정하여 모달을 닫는 함수입니다.

render 메서드에서 배경 div는 모달의 가시성을 기반으로 동적으로 추가되며 onClick 리스너도 div에 전달되어 모달의 열기 및 닫기를 제어할 수 있습니다. 모달 열기를 제어하기 위해 onClick 리스너와 함께 버튼도 추가되었습니다.

이전에 있던 모달 구성 요소를 가져와 전달된 props의 값과 함께 렌더링 메서드에서 사용합니다.

모달 테스트

모달을 보려면 프로젝트의 루트 디렉토리에서 npm start를 실행하십시오.

Project Repo

감사.