리액트(React) 애플리케이션에서 사용자 인터페이스를 더욱 풍부하고 인터랙티브하게 만들기 위해 팝업과 모달 창을 많이 사용합니다. 팝업과 모달은 사용자에게 특정 정보를 제공하거나 추가 작업을 요청하는 데 유용합니다. 이번 글에서는 리액트에서 팝업과 모달을 만드는 방법에 대해 자세히 알아보겠습니다. 이 글을 통해 기본적인 팝업 및 모달 창을 구현하고, 이를 활용하여 응용할 수 있는 기법을 익히도록 하겠습니다.

1. 팝업과 모달의 정의

팝업은 일반적으로 웹 페이지에서 사용자가 클릭하거나 특정 행동을 했을 때 나타나는 작은 창을 의미합니다. 팝업은 사용자에게 추가적인 정보나 옵션을 제공하는 데 주로 사용됩니다. 반면, 모달(modal)은 사용자가 상호작용할 수 있는 중첩된 UI 요소로, 주로 현재 진행 중인 작업에 대한 추가 정보를 제공하거나 결정을 요구합니다. 사용자는 모달 창을 닫기 전까지 다른 상호작용을 하지 못하게 되는 경우가 많습니다.

2. 팝업 및 모달을 구성하기 위한 기본 세팅

먼저 리액트 프로젝트를 생성하고 필요한 의존성을 설치해 보겠습니다. 리액트 앱을 만들기 위해 Create React App을 사용할 것입니다. 터미널에서 다음 명령어를 실행하여 새로운 리액트 프로젝트를 생성하세요.

npx create-react-app react-modal-example

프로젝트 디렉터리로 이동한 후, 프로젝트를 실행하여 기본적으로 설정된 리액트 앱을 확인할 수 있습니다.

cd react-modal-example
npm start

3. 기본 팝업 및 모달 컴포넌트 만들기

3.1. 팝업 컴포넌트

이제 실질적으로 팝업 컴포넌트를 만들어 보겠습니다. 팝업은 기본적으로 버튼 클릭 시 나타나게 할 것입니다. 간단한 팝업 컴포넌트를 생성하기 위해 Popup.js 파일을 생성하고 다음과 같이 작성합니다.

import React from 'react';
import './Popup.css'; // 스타일을 위한 CSS 파일을 임포트합니다.

const Popup = ({ message, onClose }) => {
    return (
        

            

                {message}
                닫기
            
        
    );
};

export default Popup;

위의 코드는 팝업의 구조를 정의하고 있습니다. 팝업은 메시지를 보여주는 부분과 닫기 버튼을 포함하고 있습니다. onClose 함수는 팝업을 닫는 역할을 합니다.

3.2. 모달 컴포넌트

모달 컴포넌트도 유사한 방식으로 구현할 수 있습니다. Modal.js 파일을 생성하고 다음과 같이 작성합니다.

import React from 'react';
import './Modal.css'; // 모달을 위한 CSS 파일을 임포트합니다.

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

    return (
        

            

                
{title}
                
{children}
                닫기
            
        
    );
};

export default Modal;

위의 모달 컴포넌트에서는 isOpen 속성을 통해 모달이 열려 있는지 여부를 판단합니다.

4. 팝업과 모달을 사용하는 방법

이제 생성한 팝업과 모달 컴포넌트를 사용하는 방법을 살펴보겠습니다. 기본적으로 App.js에서 팝업과 모달을 표시하고 제어할 상태를 관리하도록 설정하겠습니다.

import React, { useState } from 'react';
import Popup from './Popup';
import Modal from './Modal';

function App() {
    const [isPopupOpen, setIsPopupOpen] = useState(false);
    const [isModalOpen, setIsModalOpen] = useState(false);

    const openPopup = () => setIsPopupOpen(true);
    const closePopup = () => setIsPopupOpen(false);

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

    return (
        

            
리액트 팝업 및 모달 예제
            팝업 열기
            모달 열기

            {/* 팝업 */}
            
            
            {/* 모달 */}
            
                
이것은 모달 내용입니다.
            
        
    );
}

export default App;

이제 애플리케이션을 실행하면 “팝업 열기” 버튼과 “모달 열기” 버튼이 표시되고, 이들 버튼을 클릭하면 각각의 팝업과 모달이 출력됩니다.

5. 스타일링 팝업 및 모달

팝업과 모달은 기본적으로 사용자가 보기에도 편리해야 합니다. CSS를 사용하여 보다 세련되게 스타일링해 보겠습니다. 우선 Popup.css 및 Modal.css 파일을 생성하고 다음 내용을 추가합니다.

/* Popup.css */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.popup-close {
    margin-top: 10px;
    padding: 10px;
}

/* Modal.css */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.modal-close {
    margin-top: 10px;
    padding: 10px;
}

위의 스타일링을 적용하면 팝업과 모달이 더 매력적으로 보입니다. 팝업은 간단하고 깨끗하게 디자인되며, 모달은 더 어두운 배경과 함께 강조됩니다.

6. 다른 라이브러리를 사용한 팝업과 모달 구현

기본적인 팝업 및 모달 구현 외에, 인기 있는 리액트 UI 라이브러리인 React Modal 또는 React Bootstrap 같은 라이브러리를 사용하여 보다 복잡한 UI 요소와 상호작용을 손쉽게 구현할 수 있습니다. 이러한 라이브러리는 더욱 다양한 옵션과 커스터마이징을 제공하므로 작업 효율을 높이는 데 유용합니다.

6.1. React Modal 라이브러리 설치하기

React Modal을 사용하기 위해 다음 명령어로 라이브러리를 설치합니다.

npm install react-modal

6.2. React Modal 사용하기

설치가 완료되면, 모달을 만들어 보겠습니다. 다음과 같이 ReactModalComponent.js 파일을 생성하고 작성합니다.

import React, { useState } from 'react';
import Modal from 'react-modal';

const ReactModalComponent = () => {
    const [modalIsOpen, setModalIsOpen] = useState(false);

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

    return (
        

            모달 열기
            
                
React Modal 예제
                닫기
            
        
    );
};

export default ReactModalComponent;

위 코드에서는 react-modal 라이브러리를 사용하여 손쉽게 모달을 구현하였습니다. Modal 컴포넌트를 사용하여 모달을 나타내고, onRequestClose 속성을 통해 모달을 닫는 함수를 지정할 수 있습니다.

7. 결론

이번 글에서는 리액트에서 팝업과 모달을 만드는 방법에 대해 알아보았습니다. 기본적인 팝업과 모달 컴포넌트를 직접 구현해 보았으며, CSS를 통해 스타일링을 추가하고, 라이브러리를 사용한 다양한 방법도 소개했습니다. 팝업과 모달은 사용자 경험을 향상시키는 데 매우 중요한 요소이므로, 이러한 요소들을 적절히 활용하여 사용자에게 친숙한 인터페이스를 제공하는 것이 중요합니다.

앞으로도 리액트의 다양한 기능과 컴포넌트에 대해 연구하고, 사용자에게 더욱 매력적인 애플리케이션을 제공하기 위해 지속적으로 학습하고 적용해 나가기를 바랍니다.