React에서 Modal 컴포넌트 만들기

 

모달(Modal)은 웹 애플리케이션에서 사용자와 상호작용할 때 흔히 사용되는 UI 요소입니다. React를 사용하면 재사용 가능한 모달 컴포넌트를 간단히 구현할 수 있습니다. 이 글에서는 React로 모달 컴포넌트를 만드는 방법과 기본적인 동작 원리를 설명합니다.

1. Modal 컴포넌트의 구조

Modal은 일반적으로 다음과 같은 요소로 구성됩니다:

• 백그라운드 오버레이: 모달 뒤에 표시되는 반투명한 레이어로, 사용자의 주의를 모달로 집중시키는 역할을 합니다.
• 모달 컨테이너: 모달의 본체를 감싸는 요소로, 콘텐츠를 표시합니다.
• 닫기 버튼: 사용자가 모달을 닫을 수 있도록 제공되는 버튼입니다.

2. 기본 Modal 컴포넌트 구현

다음은 React로 간단한 Modal 컴포넌트를 구현한 예제입니다:

Modal.js

import React from 'react';
import './Modal.css';

function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-container" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}>
          &times;
        </button>
        {children}
      </div>
    </div>
  );
}

export default Modal;

Modal.css

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-container {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: relative;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

3. Modal 컴포넌트 사용

이제 Modal 컴포넌트를 실제로 사용하는 방법을 살펴보겠습니다.

App.js

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

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

  return (
    <div>
      <h1>React Modal Example</h1>
      <button onClick={() => setIsModalOpen(true)}>Open Modal</button>

      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
        <h2>Modal Title</h2>
        <p>This is a simple modal example.</p>
      </Modal>
    </div>
  );
}

export default App;

4. 주요 구현 설명

1. 조건부 렌더링: isOpen 속성을 사용하여 모달을 열고 닫는 조건을 제어합니다. isOpen이 false인 경우 null을 반환하여 모달이 렌더링되지 않도록 합니다.
2. 이벤트 전파 방지: 모달 외부를 클릭했을 때 모달을 닫는 동작을 구현하기 위해, e.stopPropagation()을 사용하여 이벤트 전파를 차단합니다.
3. CSS 스타일링: Modal.css 파일에서 오버레이와 컨테이너 스타일을 정의하여 모달이 화면 중앙에 표시되도록 합니다.

5. 추가 기능

위 기본 구현에 다음과 같은 기능을 추가할 수 있습니다:

1. 애니메이션 효과: CSS 또는 라이브러리를 사용하여 모달이 열리고 닫힐 때 애니메이션을 추가합니다.
2. 포커스 관리: 모달이 열릴 때 특정 요소에 포커스를 설정하거나, 키보드 탐색을 지원합니다.
3. 모달 내부 스크롤: 내용이 많아질 경우 스크롤을 추가하여 사용자 경험을 개선합니다.

결론

React에서 Modal 컴포넌트를 만드는 것은 간단하면서도 강력한 사용자 경험을 제공할 수 있는 방법입니다. 위 예제를 바탕으로 자신만의 커스텀 모달을 만들어 보세요. 모달은 다양한 애플리케이션에서 사용자와 상호작용할 때 유용하게 활용될 수 있습니다.