[React] 재사용 가능한 Custom Modal 만들기

재사용 가능한 모달

사이드 프로젝트 진행중에 모달창을 띄워야 하는 일이 생겼다.

대부분의 페이지에서 사용 해야했기 때문에, 재사용 가능한 컴포넌트로 제작하기로했다.

 

컴포넌트 단위로 생성했을때 여러곳에서 재사용이 가능하며, (가장 큰 장점)

개발시간을 크게줄여준다.

예를들어, 비슷하게 생긴 모달창이 20개 30개 혹은 100개 이상 필요한데 모두 다 복붙 할 수는 없다.

생산성이 매우 떨어지기 때문.

 

이를 바탕으로 컴포넌트가 얼마나 생산성을 높여주는지 실제로 만들어보면서 느껴보자.

 

일단. 컴포넌트를 먼저 생성해준다.

이 글은 Typescirpt와 NextJS 기반이다.

 

 

내가 만들어야 하는 컴포넌트 이다. 총 3가지의 변화가 있을 것이다.

1. 아이콘, 2. 텍스트, 3. 버튼

 

이 모달을 컴포넌트를 사용하지 않고 모든 프로젝트 내에서 구현하기는 정말 까다롭다.

<div className="modal-div" onClick={closeModal}>
                <div className={`modal-content ${isOpen ? 'fade-in' : ''}`} onClick={(e) => e.stopPropagation()}>
                    <Image src={warningImg} alt={'modal img'} width={60} height={60}/>
                    <p>{content}</p>
                    <button onClick={closeModal} className="save-button">확인</button>
                </div>
 </div>

이런식으로 구현 하는걸 전부 복붙하고 onclick도 다 설정해줘야 하는데 매우 귀찮고 반복적인 작업이다

 

아래는 컴포넌트로 구현한 custom modal 예시이다.

// Modal.tsx

import React, {useState, useEffect} from 'react';
import "@/app/_css/modals.scss";
import Image from "next/image";
import successImg from "/public/img/Icon/Group 2467@3x.png";
import questionImg from "/public/img/Icon/Group 2471@3x.png";
import warningImg from "/public/img/Icon/Group 2473@3x.png";

interface ModalProps {
    isOpen: boolean;
    onClose: () => void;
    modalItems: {
        content: string,
        modalType: "warning" | "success" | "question",
    };
}

const Modal: React.FC<ModalProps> = ({isOpen, onClose, modalItems}) => {
    const [modalVisible, setModalVisible] = useState(isOpen);

    const closeModal = () => {
        setModalVisible(false);
        onClose();
    };

    useEffect(() => {
        setModalVisible(isOpen)
    }, [isOpen])

    const getModalImg = () => {
        switch (modalItems.modalType) {
            case "warning":
                return warningImg.src
            case "success":
                return successImg.src
            case "question":
                return questionImg.src
        }
    };

    return (
        <>
            {modalVisible && (
                <div className="modal-div" onClick={closeModal}>
                    <div className={`modal-content ${isOpen ? 'fade-in' : ''}`} onClick={(e) => e.stopPropagation()}>
                        <Image src={getModalImg()} alt={'modal img'} width={60} height={60}/>
                        <p>{modalItems.content}</p>
                        <button onClick={closeModal} className="save-button">확인</button>
                    </div>
                </div>
            )}
        </>
    );
};

export default Modal;

이런식으로 상위 혹은, 외부 다른 page나 컴포넌트에서 내부의 매개변수 3가지만 입력해도

모달창을 띄울 수 있도록 만들었다.

자세한 설명은 코드를 직접 읽으면 이해할 수 있다.

 

간단히 설명하자면,

modalItems가 모달 내부에 들어가는 아이템 이미지등 세부 속성을 구성한다고 보면된다.

그럼 사용하는 쪽에서는 어떻게 사용할까?

<Modal isOpen={modalOpen} onClose={closeModal} modalItems={modalObject}/>

 

이런식으로 컴포넌트 삽입만 시켜주면 간단히 사용 가능하다.

물론 컴포넌트를 사용하기위해 state설정을 해주어야한다.

const [modalOpen, setModalOpen] = useState(false);
    const [modalObject, setModalObject] = useState<modalItems>({
        content:"",
        modalType:"warning",
    })

    const openModal = () => {
        setModalOpen(true);
    };

    const closeModal = () => {
        setModalOpen(false);
    };

 

위와 같은 방법으로  modal의 state를 구성해준다.

content: 필수 항목을 입력해주세요. / modalType: warning

content: 저장되었습니다. / modalType: success

 

이런식으로 하나의 컴포넌트 생성만으로 여러곳에서 사용이 가능하다.

이 방법 하나만 익혀도 생산성이 굉장히 올라간다.

다음 포스팅할때는 전역관리도 한번 구현해보아야겠다.