이 게시물에서는 react js로 사용자 정의 모달 구성 요소를 빌드합니다. CSS 프레임워크를 사용하지 않고 처음부터 이 Modal 구성 요소를 빌드할 것입니다. 아래는 이 튜토리얼의 끝 부분에서 빌드할 데모 😍입니다. 매우 아름답고 완벽하게 사용자 정의할 수 있는 Modal 구성 요소입니다.



아래와 같이 진행할 예정입니다.

새로운 반응 앱을 생성합니다.

Modal 구성 요소를 만들고 디자인합니다.

모달을 표시하는 이벤트를 트리거하는 버튼입니다.

신선한 반응 앱 만들기

먼저 다음 명령을 사용하여 create-react-app cli 도구의 도움으로 새로운 반응 프로젝트를 생성합니다.

npx create-react-app modal

npm start를 사용하여 생성된 앱을 시작하고 브라우저를 열고 http://localhost:3000로 이동합니다. 반응의 기본 앱이 표시됩니다.
이제 실제 Modal 구성 요소를 디자인하고 만드는 다음 단계로 넘어 갑시다.

Modal 컴포넌트 만들기 및 디자인

이제 앱의 src 폴더 안에 구성 요소 폴더를 만듭니다. 이 구성 요소 폴더 안에 모달 구성 요소를 포함하는 파일Modal.js과 모달 구성 요소에 대한 css 스타일을 포함하는 파일modal.module.css이 있는 모달 폴더를 만듭니다.

디자인 부분으로 돌아가서 아래에 코드 스니펫이 있습니다.

/* modal.module.css */

.modal__wrap {
    position: fixed;
    display: block;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    overflow-x: hidden;
    background-color: rgba(31, 32, 41, .75);
    pointer-events: none;
    opacity: 0;
    transition: opacity 250ms 700ms ease;
}

.visible {
    pointer-events: auto;
    opacity: 1;
    transition: all 300ms ease-in-out;
}

.modal {
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
    display: block;
    width: 60vw;
    height: 60%;
    min-height: 400px;
    min-width: 400px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
    padding-bottom: 20px;
    background-color: #fff;
    align-self: center;
    box-shadow: 0 12px 25px 0 rgba(199, 175, 189, .25);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 250ms 250ms ease, transform 300ms 250ms ease;
    transform: scale(0);
}

.visible .modal {
    opacity: 1;
    transform: scale(1);
    transition: opacity 250ms 500ms ease, transform 350ms 500ms ease;
}

.modal__wrap는 모달의 래퍼 및 배경에 대한 스타일을 지정하는 클래스입니다.

.modal는 초기에 숨겨질 실제 모달 구성 요소의 스타일을 가질 클래스입니다.

.visible 클래스는 모달이 페이드 인 및 페이드 아웃 효과와 함께 표시되도록 합니다.

이제 Modal 컴포넌트를 생성해 보겠습니다.
아래는 이에 대한 코드 스니펫입니다.

//Modal.js

import React, { useEffect, useRef } from 'react';
import Button from '../button/Button';
import CloseIcon from '../CloseIcon';
import styles from './modal.module.css';

const Modal = ({ modalStyle, children, show, onClose, backdropStyle }) => {
    const modalRef = useRef(null);
    useEffect(
        () => {
            if (show) {
                modalRef.current.classList.add(styles.visible);
            }
            else {
                modalRef.current.classList.remove(styles.visible);
            }
        },
        [
            show
        ]
    );
    return (
        <React.Fragment>
            <div ref={modalRef} style={backdropStyle} className={`${styles.modal__wrap}`}>
                <Button
                    onClick={onClose}
                    style={{ width: 60, height: 40, position: 'absolute', top: 0, right: 0, margin: '1rem' }}
                    className={styles.close__btn}
                >
                    <CloseIcon height="20px" width="20px" className={styles.close__icon} />
                </Button>
                <div style={modalStyle} className={styles.modal}>
                    {children}
                </div>
            </div>
        </React.Fragment>
    );
};

export default Modal;

이 구성 요소는 네 가지 소품을 사용합니다.
1. modalStyle - 표시되는 모달 창의 스타일을 사용자 정의할 수 있습니다.

backdropStyle - 모달 창의 배경 스타일을 사용자 정의할 수 있습니다.

onClose - 모달을 닫는 논리를 작성할 수 있는 이벤트 핸들러.

show - 모달이 열려 있는지 여부를 결정하는 부울 속성입니다.

여기에서 이 구성 요소 내부에 두 개의 구성 요소Button와 CloseIcon을 더 사용했습니다. Now Button 구성 요소는 기본 스타일의 간단한 버튼입니다. CloseIcon은 단순히 모달을 닫는 아이콘svg입니다.

이 구성 요소에는 두 가지 주요 기능 부분이 있습니다.

먼저 useEffect() 후크 내부에서 show prop이 참인지 아닌지 확인합니다. show가 true 인 경우 구성 요소에 .visible 클래스를 추가하거나 .visible react hook의 도움으로 Modal 구성 요소에서 useRef() 클래스를 제거합니다.

소품에 의해 전달된 처리기onClose()를 CloseIcon 의 onClick 이벤트 처리기에 추가하여 클릭 시 모달이 닫히도록 합니다.

모달을 표시하는 이벤트를 트리거하는 버튼

간단히 하기 위해 아래와 같이 App.js 파일에 Button을 추가했습니다.

//App.js

import React, { useState } from 'react';
import './App.css';
import Button from './components/button/Button';
import Modal from './components/modal/Modal';

function App() {
    const [
        show,
        setShow
    ] = useState(false);
    return (
        <React.Fragment>
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
                <Button onClick={() => setShow(true)}>Open Modal</Button>
            </div>
            <Modal show={show} onClose={() => setShow(false)}>
                <div className="content">
                    <img src="https://cdn.pixabay.com/photo/2015/01/09/11/11/office-594132__340.jpg" alt="Developer" />
                    <div className="text">
                        <h2>John Doe</h2>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe aliquid placeat omnis
                            adipisci dolores quae amet mollitia sint, temporibus eum magnam facilis odio ex incidunt?
                            Deleniti quam et rem obcaecati. Laborum atque odit expedita nulla.
                        </p>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita labore laborum, assumenda
                            dolorum provident quod itaque earum, officia in placeat dignissimos nostrum? Totam corrupti
                            nihil repudiandae ducimus atque quod eos!
                        </p>
                    </div>
                </div>
            </Modal>
        </React.Fragment>
    );
}

export default App;

그게 당신이 한 일입니다. 그만큼 간단합니다. 이제 프로젝트 어디에서나 이 구성 요소를 사용할 수 있습니다. 이와 같은 더 많은 기사를 보려면 내 개인 블로그here를 확인하십시오.
Modal 컴포넌트의 CodeSandbox 링크입니다.
이 튜토리얼이 여러분에게 도움이 되었는지, 어떤 경우에 사용했는지 알려주세요. 항상 읽어주셔서 감사합니다!!!