모달 창 띄우기

모달이 뭐에요?

• 웹 애플리케이션에서 자주 사용되는 UI 요소. 사용자의 현재 작업 흐름을 중단시키고 특정 정보를 표시하거나 사용자의 입력을 요구하는 창. 보통 화면 중앙에 나타나며, 배경을 흐리게 하여 사용자의 주의를 모달 내용으로 집중시킴.

특징은 뭐에요?

• 중첩된 UI : 모달은 현재 화면 위에 오버레이 형태로 나타나며, 사용자가 모달을 닫기 전 까지는 배경의 다른 요소와 상호작용 할 수 없다.

• 상태관리 : 모달의 열림 믿 닫힘 상태를 관리하는 로직이 필요함. 사용자의 클릭, 키보드의 입력, 또는 특정 이벤트에 따라 상태가 변경됨.
• 사용자 입력 : 모달은 종종 사용자 입력을 요구하는 폼이나 알림 메시지를 표현한다. 예를 들어, 비밀번호 재설정, 경고 메시지, 확인 대화상자 등이 있음.

그럼 어떻게 작동하는건데요?

• 트리거 : 사용자가 특정 버튼이나 링크를 클릭하면 모달을 열기 위한 이벤트가 발생함. 이벤트 핸들러로 만듬.
• 상태 관리 : React에서는 useState 훅을 사용해 모달의 열림 상태를 관리한다. isOpen이라는 변수를 만들고, 이를 기반으로 모달의 렌더링 여부를 결정한다.
• 렌더링 : isOpen이 true일 때 모달 컴포넌트가 렌더링 된다. 이 때 모달 내부에는 사용자가 볼 정보나 입력할 폼이 포함됨.
• 오버레이 : 모달이 열리면 배경을 흐리게 하여 사용자의 시선을 집중시킴. CSS 스타일을 사용해 배경을 어둡게 처리함.
• 닫기 기능 : 사용자가 모달 내의 닫기 버튼을 클릭하거나, 모달 외부를 클릭할 때, onClose와 같은 함수를 호출하여 isOpen 상태를 false로 변경함. 이렇게 하면 모달이 화면에서 사라짐.

ex 코드 )

• Tailwindcss 사용.

import React, { useState } from 'react';

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

    return (
        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
            <div className="bg-white rounded-lg p-6 w-96">
                <h2 className="text-lg font-semibold">모달 제목</h2>
                <p className="mt-4">모달 내용</p>
                <button onClick={onClose}>닫기</button>
            </div>
        </div>
    );
}

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

    return (
        <div>
            <button onClick={() => setModalOpen(true)}>모달 열기</button>
            <Modal isOpen={isModalOpen} onClose={() => setModalOpen(false)} />
        </div>
    );
}

export default App;

• Modal 컴포넌트를 정의한다. 이 함수는 isOpen과 onClose라는 두개의 인자(props)를 받는다. isOpen은 모달이 열려있는지 여부를 나타내고, onClose는 모달을 닫기 위한 함수임.

 if (!isOpen) return null;

모달 상태 확인 코드. isOpen이 false일 경우. 모달을 렌더링하지 않고 null을 반환한다. 이는 모달이 열려있지 않을 때 아무것도 보여주지 않도록 한다.

• return : 렌더링 시작부분. 부모 div는 전체 화면을 덮는 배경을 생성한다. fixed는 화면에 고정되게, inset-0 은 상하좌우를 0으로 설정하여 모든 방향에서 화면을 덮는다. flex, items-center, justify-center를 사용해 자식 요소를 화면 가운데 배치할 수 있게 한다. bg-black, bg-opacity-50은 검은색 배경에 반투명 효과를 준다.
• 자식 요소에 모달 팝업창에 담을 내용을 작성한다.
• button= onClose를 사용해 닫기 버튼을 만든다. 이 버튼을 클릭하면 onClose 함수가 호출되어 모달이 닫히게 된다.
• useState를 사용하여 상태 선언을 해준다. isModalOpen이라는 상태 변수를 설정하고 초기값을 false로 설정한다. setModalOpen은 이 상태를 업데이트 하는 함수.
• button이나 link를 클릭하는 onClick이벤트핸들러를 통해 setModalOpen 상태 업데이트 함수가 true로 호출되게 한다. 클릭하면 모달 창이 열림.
• Modal 컴포넌트를 호출하며 isOpen prop으로 현재 모달의 상태를 전달하고, onClose prop으로 모달을 닫기 위한 함수를 전달한다.

흐름을 보자 :

1. 버튼 클릭 : 모달 열기 버튼을 클릭. onClick 이벤트가 발생한다.
2. useState로 인해 상태변경을 감지하고 컴포넌트를 다시 렌드링함. 여기에서 App 컴포넌트가 다시 실행되며, 새로운 값인 true를 가진 isModalOpen이 사용됨.
3. Modal 컴포넌트가 호출된다. isModalOpen이 true가 되었으므로, Modal 컴포넌트 호출
4. isOpen 인자 전달. isModalOpen의 값인 true 가 컴포넌트의 isOpen prop으로 전달됨.
5. Modal 컴포넌트 내부에서 isOpen이 true 이므로, return null이 실행되지 않고 아리 return이 렌더링 된다.
6. 모달 내용이 화면에 표시됨. 모달 내의 닫기 버튼을 클릭할 수 있다. 닫기 버튼 클릭 시 onClose prop으로 전달된 함수가 호출되어 setModalOpen(false)가 실행됨. 이로 인해 isModalOpen이 다시 false로 변경되고, 다시 렌더링
7. isModalOpen이 false가 되므로, Modal 컴포넌트는 return null을 실행해 모달이 화면에서 사라지게 됨

요약 :

• 버튼 클릭 -> 상태변경(true) -> 닫기 버튼 클릭 -> 상태변경(false) -> 모달 사라짐.
• isOpen이 false일 때는 모달이 렌더링되지 않으므로, 아무것도 표시되지 않음.