React에서 팝업 모달을 만드는 방법

모달이란 무엇입니까?

모달은 특정 작업에 집중할 수 있도록 모든 기능을 차단하여 페이지에 나타나는 상자입니다. 이것은 차별화 기능이며 사용자에게 작업을 수행하도록 요청합니다.
기본 콘텐츠로 돌아가려면 사용자는 작업을 완료하거나 닫아 모달에 참여해야 합니다.

React로 모달을 만들어 봅시다

GitHub의 코드: https://github.com/nicvazquez/react-modal
데모: https://react-modal-nicvazquez.vercel.app/

1단계: 앱 만들기

다음 명령을 사용하여 Vite로 React 앱을 만들어 보겠습니다.

npm create vite@latest

그런 다음 몇 가지 옵션을 완료하라는 메시지가 표시됩니다.

√ Project name: ... react-modal
√ Select a framework: » react
√ Select a variant: » react

훌륭한! 이제 다음 명령을 실행합니다.

cd react-modal
npm install
npm run dev

모든 것이 잘 되었다면 종속성이 설치된 애플리케이션을 생성하고 프로젝트를 로컬 서버에서 실행해야 합니다. 제 경우에는 http://127.0.0.1:5173/ 입니다.

2단계: 애플리케이션의 기반을 만들어 봅시다.

App.jsx를 열고 버튼 요소를 만듭니다.
코드는 다음과 같아야 합니다.

import "./App.css";

function App() {
    return (
        <div className="container">
            <button>Open Modal</button>
        </div>
    );
}

export default App;

App.css 파일을 수정합니다. 스타일은 다음과 같아야 합니다.

.container {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100vh;
}

이제 index.css를 수정합니다.

:root {
    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
    color-scheme: light dark;
    color: rgba(255, 255, 255, 0.87);
    background-color: #242424;
}

button {
    border-radius: 8px;
    border: 1px solid transparent;
    padding: 0.6em 1.2em;
    font-size: 1em;
    font-weight: 500;
    font-family: inherit;
    background-color: #1a1a1a;
    cursor: pointer;
    transition: border-color 0.25s;
}
button:hover {
    border-color: #646cff;
}
button:focus,
button:focus-visible {
    outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
    button {
        background-color: #f9f9f9;
    }
}

로컬 서버로 이동하면 다음이 있어야 합니다.

3단계: 모달 만들기

src 폴더에서 components 폴더를 만들고 그 안에 Modal 및 Modal.jsx 파일을 포함해야 하는 modal.module.css라는 또 다른 폴더를 만들어야 합니다.

우리 프로젝트의 구조는 다음과 같아야 합니다.

REACT-MODAL
└─── node_modules
└─── public    
│
└─── src
│   │
│   └─── assets
│   |       react.svg
│   └─── components \ Modal
│   |        Modal.jsx
│   |        modal.module.css
|   |   App.css
|   |   App.jsx
|   |   index.css
|   |   main.jsx
│   
|   .gitignore
|   index.html
|   package-lock.json
|   package.json
|   vite.config.js

모달에 구조를 부여하려면 Modal.jsx에 HTML을 추가해야 합니다.

import React from "react";
import styles from "./modal.module.css";

export const Modal = () => {
    return (
        <div className={styles.modalBack}>
            <div className={styles.modalContainer}>
                <div>
                    <h2>Modal</h2>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, nisi. Dolorem est
                        esse iste perferendis.
                    </p>
                </div>
                <button className={styles.modal__closeBtn}>Close</button>
            </div>
        </div>
    );
};

모달의 스타일을 지정하려면 modal.module.css에 이 코드가 있어야 합니다.

.modalBack {
    position: absolute;
    height: 100vh;
    width: 100%;
    display: grid;
    place-items: center;
    background-color: rgba(0, 0, 0, 0.322);
}

.modalContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    height: 30%;
    max-width: 60%;
    background-color: rgb(39, 43, 114);
    padding: 3rem;
    border-radius: 5px;
}

App.jsx로 이동하여 Modal을 가져오겠습니다.

import "./App.css";
import { Modal } from "./components/Modal/Modal";

function App() {
    return (
        <div className="container">
            <button>Open Modal</button>
            <Modal />
        </div>
    );
}

export default App;

모달은 다음과 같아야 합니다.



지금까지는 좋았지만 한 가지 빠진 것이 있습니다. 사용자가 버튼을 클릭하면 모달이 표시됩니다.
시작하자!

4단계: 모달을 열 수 있음

App.jsx로 이동하여 가져오기useState:

import { useState } from "react";

useState를 기본값false으로 선언해 보겠습니다.

const [showModal, setShowModal] = useState(false)

모달을 표시하기 위해 onClick 함수와 조건을 추가해 보겠습니다.

<button onClick={() => setShowModal(true)}>Open Modal</button>
{showModal && <Modal />}

App.jsx는 다음과 같아야 합니다.

import { useState } from "react";
import "./App.css";
import { Modal } from "./components/Modal/Modal";

function App() {
    const [showModal, setShowModal] = useState(false);
    return (
        <div className="container">
            <button onClick={() => setShowModal(true)}>Open Modal</button>
            {showModal && <Modal />}
        </div>
    );
}

export default App;

이제 버튼을 클릭하면 모달이 나타납니다. 우리는 잘하고 있지만 여전히 모달을 닫아야 합니다.

5단계: 모달을 닫을 수 있음

모달을 닫으려면 Modal.jsx 파일로 이동하여 prop을 매개변수로 전달해야 합니다.

export const Modal = ({ closeModal }) => {

해당 소품을 모달의 버튼에 onClick 이벤트로 넣습니다.

<button onClick={closeModal} className={styles.modal__closeBtn}>
    Close Modal
</button>

모달 외부를 클릭할 때 모달도 닫으려면 소품을 상위 div에 전달할 수 있습니다.

<div onClick={closeModal} className={styles.modalBack}>

우리의 Modal.jsx는 다음과 같아야 합니다.

import React from "react";
import styles from "./modal.module.css";

export const Modal = ({ closeModal }) => {
    return (
        <div onClick={closeModal} className={styles.modalBack}>
            <div className={styles.modalContainer}>
                <div>
                    <h2>Modal</h2>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, nisi. Dolorem est
                        esse iste perferendis.
                    </p>
                </div>
                <button onClick={closeModal} className={styles.modal__closeBtn}>
                    Close Modal
                </button>
            </div>
        </div>
    );
};

이제 onClick 이벤트가 작동하려면 App.jsx에서 함수를 소품으로 보내야 합니다.

{showModal && <Modal closeModal={() => setShowModal(false)} />}

우리의 App.jsx는 최종적으로 다음과 같아야 합니다.

import { useEffect, useState } from "react";
import "./App.css";
import { Modal } from "./components/Modal/Modal";

function App() {
    const [showModal, setShowModal] = useState(false);

    return (
        <div className="container">
            <button onClick={() => setShowModal(true)}>Open Modal</button>

            {showModal && <Modal closeModal={() => setShowModal(false)} />}
        </div>
    );
}

export default App;

완료! :-)

그거였다! 이 포스팅이 많은 도움이 되셨기를 바랍니다. 질문이나 제안은 댓글에 남겨주세요.

GitHub에서 코드를 볼 수 있습니다: https://github.com/nicvazquez/react-modal
데모: https://react-modal-nicvazquez.vercel.app/