React의 애니메이션 모달

화면 중앙에 팝업되는 모달 설정에 대한 안내가 될 것입니다.

모달 구성 요소 만들기

import React from "react"

function Modal(props) {
  return (
    <div className="modal">
      <div className="modal-content">
        <div className="modal-header">
          <h4 className="modal-title">Modal Title</h4>
        </div>
        <div className="modal-body">Modal Body</div>
        <div className="modal-footer">
          <button className="button">Close</button>
        </div>
      </div>
    </div>
  )
};

export default Modal

모달 스타일 지정

/* Modal */

.modal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  width: 500px;
  background-color: #fff;
}

.modal-header, .modal-footer {
  padding: 10px;
}

.modal-body {
  padding: 10px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

App.js로 가져오기

import React from "react"
import Modal from "./components/Modal/Modal"

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

모달 표시

Show Modal 버튼을 누르면 모달이 팝업되어야 합니다.

상태를 사용하면 현재 상태에 따라 모달을 표시하거나 숨길 수 있습니다. Modal.js 에서 모달을 표시해야 하는지 확인하는 다음 소품 검사를 추가합니다.

// Modal.js

function Modal(props) {
  if (!props.show) {
    return null
  }

...

}

useState를 사용하여 App.js에 상태 개체를 추가합니다.

import React, { useState } from "react"
import Modal from "./components/Modal/Modal.jsx"
import "./App.css"

function App() {
  const [show, setShow] = useState(false)
  return (
    <div className="App">
      <h1>Scratch Pad</h1>
      <button onClick={() => setShow(true)}>Show Modal</button>
      <Modal show={show}/>
    </div>
  )
}

export default App

모달 숨기기

다음 코드를 업데이트하여 소품을 변경하여 함수 없이 모달을 닫는 방법을 구현합니다state.

// App.js

<button onClick={() => setShow(true)}>Show Modal</button>
<Modal onClose={() => setShow(false)} show={show} />

// Modal.js

<div className="modal-footer">
  <button onClick={props.onClose} classname="button">Close</button>
</div>

외부 클릭 시 모달 닫기

모달을 클릭했을 때 모달이 저절로 닫히는 방법을 추가해야 합니다.

기능은 예상대로 유지되며 닫지 않고 모달에서 콘텐츠를 클릭하고 close 버튼을 클릭하거나 모달을 꺼서 닫을 수 있습니다.

// Modal.js

return (
  <div className="modal" onClick={props.onClose}>
    <div className="modal-content" 
         onClick={(e) => e.stopPropagation()}>
      ...
    </div>
  </div>
)

모달 콘텐츠 상자 외부를 클릭하면 모달이 닫히지만 내부를 클릭하면 아무 작업도 수행되지 않습니다.

이제 드롭인 애니메이션을 제공합니다.

모달 애니메이션

다음을 추가하여 모달이 열렸을 때 드롭다운 애니메이션을 제공합니다.

.modal {
  ...
  opacity: 0;
  transition: all 0.3s ease-in-out;
  pointer-events: none;
}

.modal.show {
  opacity: 1;
  pointer-events: visible;
}

.modal-content {
  ...
  transform: translateY(-200px);
  transition: all 0.3s ease-in-out;
}

.modal-show .modal-content {
  transform: translateY(0);
}

그리고 마지막으로 useState 후크 핸들을 사용하여 .show 클래스를 처리합니다.

// Modal.js

function Modal(props) {
  // if (!props.show) { return null } should be removed.
  return (
    <div className={`modal ${props.show ? "show" : ""}`} onClick={props.onClose}>
    ...
    </div>
  )
}

현재 CSS를 통해 표시/숨기기 기능이 처리되고 있으므로 null 확인을 제거해야 합니다.

이제 약간의 애니메이션이 포함된 모달이 생겼습니다. 원하는 방식으로 작동하도록 전환/변형 설정을 사용하십시오.

back to top