React - Modal 실습

# 모달창과 팝업창의 차이

## 팝업창

팝업창이란 현재 열려있는 브라우저 페이지에 또 다른 브라우저 페이지를 띄우는 것이다.

즉, 창 + 창 이란 개념이다. 브라우저에서 이 창을 열기 닫기를 제어할 수 있다.

## 모달창

새로 뜬 자식창을 닫기 전까지는 부모와의 소통이 불가능

모달창은 기존의 브라우저 페이지 위에 새로운 윈도우 창이 아닌 레이어를 띄우는 것을 말한다.

모달창은 제거를 하지 않고도 페이지를 이동하면 자연히 사라진다.

기존의 페이지와 부모-자식 관계를 갖으며, 브라우저의 새 창 제어 옵션에는 전혀 영향을 받지 않는다.

모달을 실행한 채로 부모창의 스크롤이 가능하지 않으면 모달, 가능하다면 모달리스라고 불린다.

이벤트 공지, 로그인/회원가입, 게시글 작성, 알림 등 용도는 다양하다. 공통점은 서비스 사용 중 독립적인 프로세스가 필요할 때 사용된다는 것이다. 예를 들면 카카오톡 어플에서 프로필 또는 채팅방을 길게 누르면 미리보기와 메뉴가 기존 화면 위에 뜨는 경우, 지도 어플에서 길찾기를 한 경로가 기존 페이지 위로 뜨는 경우등이다.

## 팝업창과 모달창의 공통점

특정 역영의 위치에 원하는 사이즈로 별도의 레이어를 만들어서 사용자에게 어필하고자 하는 뜻이다.

프로모션을 진행, 서비스 공지, 주의사항, 안내문 등을 전달 또는 강조할 때 새 창을 이용한다.

## 팝업창과 모달창의 차이점

팝업창의 경우 웹 시작과 동시에 띄우는 경우가 많고, 모달창의 경우 중간 중간 사용자에게 보여주는 경우가 많다.

사용 의도에 관점을 두고 본다면, 팝업창은 현재 의도하는 목적과 상관없이 뜨는 창이고

모달창은 다음 진행으로 넘어가기위한 필요에 의해 사용되는 창.

또 다른 차이는 팝업창은 사용자가 원할 경우 브라우저의 옵션을 통해 열지 않도록 강제할 수 있는 기능이 있다.

그렇기 때문에 반드시 노출해야하는 부분은 모달창을 사용하는 것이 좋을 것이다.

모달창은 부모창에 종속되는게 많아서 마우스 오른쪽 소스 보기를 할 수 가 없다.

그리고 모달창을 닫기 전에는 부모창에 직접 이벤트를 행할 수 없다.

그에 비해 팝업창은 자유롭다.

 

<App.js>

import { useState } from 'react';
import ModalBasic from './ModalBasic';

// 모달을 노출하는 페이지
function App() {
    // 모달창 노출 여부 state
    const [modalOpen, setModalOpen] = useState(false);

    // 모달창 노출
    const showModal = () => {
        setModalOpen(true);
    };

    return (
        <div>
            <button onClick={showModal}>모달 띄우기</button>
            {modalOpen && <ModalBasic setModalOpen={setModalOpen} />}
        </div>
    );
}

export default App;

 

<ModalBasic.js>

/* eslint-disable no-restricted-globals */
import { useEffect, useRef } from 'react';
import styles from './ModalBasic.module.css';

function ModalBasic({ setModalOpen, id, title, content, writer }: PropsType) {

    // 모달 끄기 (X버튼 onClick 이벤트 핸들러)
    const closeModal = () => {
        setModalOpen(false);
    };

    // 모달 외부 클릭시 끄기 처리
    // Modal 창을 useRef로 취득
    const modalRef = useRef(null);
    
    useEffect(() => {
        // 이벤트 핸들러 함수
        const handler = () => {
            // mousedown 이벤트가 발생한 영역이 모달창이 아닐 때, 모달창 제거 처리
            if (modalRef.current && !modalRef.current.contains(event.target)) {
                setModalOpen(false);
            }
        };
        
        // 이벤트 핸들러 등록
        document.addEventListener('mousedown', handler);
        // document.addEventListener('touchstart', handler); // 모바일 대응
        
        return () => {
            // 이벤트 핸들러 해제
            document.removeEventListener('mousedown', handler);
            // document.removeEventListener('touchstart', handler); // 모바일 대응
        };
    });
    
    return (
        // 모달창을 useRef로 잡아준다.
        <div ref={modalRef} className={styles.container}>
            <button className={styles.close} onClick={closeModal}>
                X
            </button>
            <p>모달창입니다.</p>
        </div>
    );
}
export default ModalBasic;

event 변수를 사용하려면 ModalBasic.js 가장 위에 있는 한 줄이 필요하다.

 

<ModalBaisc.module.css>

.container{
    /*모달창 크기*/
    width: 300px;
    height: 200px;

    /*최상단 위치*/
    z-index: 999;

    /*중앙 배치*/
    /*top, bottom, left, right는 브라우저 기준*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /*모달창 디자인*/
    background-color: yellowgreen;
    border: 1px solid black;
    border-radius: 8px;
}

/*모달창 내부 X 버튼*/
.close{
    position: absolute;
    right: 10px;
    top: 10px;
}