[React/리액트] Modal component 만들기

※ 실행화면 ※

One button

Two button

 

※ 사용 기술(언어)※

React, Javascirpt, CSS

---

 

1. One button

◈ App JSX

import React from "react";
import {useState} from "react";
import "./App.css";
import Modal from "./component/modal";

function App() {
  const [isModal, setIsModal] = useState(false);
  const [info, setInfo] = useState('modal 창 테스트 중……');

  const onClick = () => {
    setIsModal(!isModal)
  }

  return (
    <div className="main">
        <button className="btn" onClick={onClick}>
          Open the modal!
        </button>
        {isModal ? (
            <Modal isModal={isModal} info={info} setIsModal={setIsModal}/>
            ) : null }
    </div>
  );
}

export default App;

• info useState로 각 모달 창마다 각기 다른 안내문구를 넣을 수 있도록 재사용성을 추가
• isModa useState가 true일 때, Modal component가 화면에 보이도록 설정

 

 

◈ App CSS

.main{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.btn{
  border: none;
  padding: 1rem 1.5rem;
  background-color: #6B8E23;
  color: white;
  font-weight: bold;
  font-size: 1.3rem;
}

 

 

 

◈ Modal JSX

import React from "react";
import './modal.css';

function Modal(props){
    const closeModal = () => {
        if (props.isModal){
            return props.setIsModal(false);
        }
    };

    const content = props.info;

    return (
        <div className="container">
            <div className="modalBody">
                <div className="text">
                    {content.split('\\n').map((text, idx) => (
                        <span key={idx}>
                            {text}
                            <br />
                        </span> ))}
                </div>
                <button className="buttons" onClick={closeModal}>취소</button>
            </div>
        </div>
    );
}

export default Modal;

• props를 통해 부모(App.js) 컴포넌트에서 선언된 isModal(useState)를 받아와 사용 
• closeModal에서 isModal이 true인지 확인하고, true일 때, 만약 사용자가 Modal 컴포넌트를 닫고 싶어 하면, isModal를 false로 바꿔. Modal 컴포넌트가 없어지게 함수를 작성 
• '\n' 기준으로 span tag 안에 있는 문자를 자름 ▶ Modal안에 들어갈 안내문구에 enter가 필요한 경우 '\n'을 사용

 

 

◈ Modal CSS

.container {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #C1E7FF;
    width: 250px;
    height: auto;
    white-space: pre-wrap;
    z-index: 70;
}

.modalBody {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.text {
    text-align: center;
    color: black;
    font-size: 1rem;
    height: 80%;
    white-space: pre-line;
    padding: 1.2rem;
}

.buttons {
    width: auto;
    height: auto;
    margin: 1rem;
    color: black;
    border: none;
    padding: 0.5rem;
    background-color: transparent;
}

.buttons:hover{
    background-color: aliceblue;
    border: 1px solid #4599CE;
}

 

---

 

2. Two button 

※ react router dom v6 사용

◈ App JSX

import React from "react";
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from "./component/Home";
import Next from "./component/Next";


function App() {
  return (
      <div className="App">
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/next" element={<Next />} />
          </Routes>
        </BrowserRouter>
      </div>
  );
}

export default App;

• 기존 App.jsx에 있던 내용을 Home.jsx에 옮긴 뒤, App.jsx에 route를 추가

 

 

◈ Modal JSX

import React from "react";
import { Link } from "react-router-dom";
import "./modal.css";

function Modal(props){
    const closeModal = () => {
        if (props.isModal){
            return props.setIsModal(false);
        }
    };

    const content = props.info;

    return (
        <div className="container">
            <div className="modalBody">
                <div className="text">
                    {content.split('\\n').map((text, idx) => (
                        <span key={idx}>
                            {text}
                            <br />
                        </span> ))}
                </div>
                <div className="btn-list">
                    <button className="buttons" onClick={closeModal}>취소</button>
                    <Link to = "/next">
                        <button className="buttons">확인</button>
                    </Link>
                </div>
            </div>
        </div>
    );
}

export default Modal;

• Link를 통해 '확인' 버튼을 누를 경우 '/next' 로 이동시킴

 

 

◈ Modal CSS

.container {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #C1E7FF;
    width: 250px;
    height: auto;
    white-space: pre-wrap;
    z-index: 70;
}

.modalBody {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.text {
    text-align: center;
    color: black;
    font-size: 1rem;
    height: 80%;
    white-space: pre-line;
    padding: 1.2rem;
}

.btn-list{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.buttons {
    width: auto;
    height: auto;
    margin: 1rem;
    color: black;
    border: none;
    padding: 0.5rem;
    background-color: transparent;
}

.buttons:hover{
    background-color: aliceblue;
}