[Next.js] 모달창 만들기(Modal)

🚪 들어가며

 

예시 코드를 Next.js로 작성하여 이번 포스팅을 Next.js로 분류하였고 바닐라 js나 react에서도 비슷한 방식으로 구현할 수 있습니다. 예시 코드에서 스타일링은 tailwind CSS를 통해 간단히 구현했습니다. 

 

 

📚 개념 정리

 

모달 창(Modal)은 화면 위에 나타나는 팝업 창으로, 사용자가 그 창을 닫거나 조작하지 않으면 배경의 다른 요소들과 상호작용할 수 없게 만듭니다. 주로 사용자에게 중요한 정보를 전달하거나 특정 작업을 완료하도록 요구할 때 사용됩니다.

모달 창은 일반적으로 absolute 또는 fixed 포지셔닝을 사용하여 화면의 중앙에 위치시키며, 배경은 흐리게 하거나 클릭할 수 없도록 막습니다. 저는 fixed를 사용하여 모달 창을 만들었습니다.

 

Next.js로 만든 간단한 modal창

 

 

🖥️ 예시 코드

 

다시 한번 말씀드리자면, 해당 예시 코드는 Next.js와 tailwind CSS를 사용하여 작성했습니다 ✏️

 

📌 Modal.js

// src/components/Modal.js
import React from 'react';

const Modal = ({ isOpen, onClose, title, children }) => {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center">
      <div className="bg-white p-6 rounded-lg w-96">
        <h2 className="text-xl font-bold mb-4">{title}</h2>
        <div className="mb-4">{children}</div>
        <button
          className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
          onClick={onClose}
        >
          닫기
        </button>
      </div>
    </div>
  );
};

export default Modal;

 

 

설명

• Modal 컴포넌트는 isOpen 속성을 받아 모달을 열지 결정합니다. 모달이 열리지 않았을 때는 아무것도 렌더링하지 않습니다.
• Modal은 fixed 속성을 사용해 화면의 중앙에 위치하며, inset-0를사용해 화면 전체를 덮습니다.
• 배경은 bg-black bg-opacity-50로 설정되어 검은색 투명 배경이 흐리게 적용됩니다.

 

📌 index.js

// src/pages/index.js
import { useState } from 'react';
import Modal from '../components/Modal';

export default function Home() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);

  return (
    <div className="flex justify-center items-center h-screen">
      <button
        className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600"
        onClick={openModal}
      >
        모달 열기
      </button>
      <Modal isOpen={isModalOpen} onClose={closeModal} title="모달 창 제목">
        <p>모달 창 내용이 여기에 들어갑니다.</p>
      </Modal>
    </div>
  );
}

 

 

설명

• index.jsx에서 상태(isModalOpen)를 사용해 모달의 열림/닫힘을 제어하며, 모달을 열거나 닫는 버튼을 제공합니다.

 

 

💡 마무리

 

위에서 보신 것과 같이 스타일링만으로 쉽게 모달창을 구현 할 수 있습니다. 혹시 코드에 대한 설명이 필요하시면 댓글 남겨주세요!🙂‍↕️