[UI] Modal [UI요소 만들기]

📌 모달(Modal) 컴포넌트란?

모달(Modal)은 사용자에게 중요한 정보를 전달하거나, 사용자로부터 입력을 받을 때 화면 위에 겹쳐서 표시되는 UI 컴포넌트입니다. 보통 배경을 흐리게 처리하여 사용자 시선을 모달에 집중시키며, 사용자의 흐름을 잠시 멈추게 하는 차단적 인터페이스입니다.

---

🎯 주요 기능

• 중요 정보 표시: 경고, 확인 요청, 폼 입력 등 중요한 내용을 사용자에게 전달.
• 차단적 UI: 모달이 열린 동안에는 배경과의 상호작용이 불가능하여 사용자의 주의를 집중시킴.
• 닫기 기능 제공: ‘닫기’ 버튼, 바깥 영역 클릭, ESC 키 등 다양한 방식으로 닫을 수 있음.
• 커스터마이징 가능: 제목, 본문, 버튼 등을 자유롭게 조합하여 다양한 목적에 맞게 사용 가능.
• 애니메이션: 부드러운 페이드 인/아웃 등의 전환 효과로 자연스러운 사용자 경험 제공.

❗️구현 내용

컴파운드 패턴을 활용한 모달 컴포넌트 만들기

컴파운드 패턴이란?
React에서 컴파운드 패턴은 여러 개의 하위 컴포넌트를 하나의 상위 컴포넌트와 함께 조합해 사용하는 패턴입니다. 상위 컴포넌트가 공통된 상태나 로직을 관리하고, 하위 컴포넌트들은 이 콘텍스트에 접근하여 동작하도록 설계됩니다.

import { ReactNode, SyntheticEvent } from 'react'
import cx from '../cx'
import { useSetModals } from './modalContext'

const Modal = ({
  id,
  hideOnClickOutside = false,
  children,
}: {
  id: string
  hideOnClickOutside?: boolean
  children: ReactNode
}) => {
  const { closeModal } = useSetModals()
  const closeThis = () => closeModal(id)
  const stopPropagation = (e: SyntheticEvent) => e.stopPropagation()

  return (
    <div className={cx('Modal')} onClick={hideOnClickOutside ? closeThis : undefined}>
      <div className={cx('inner')} onClick={stopPropagation}>
        {children}
      </div>
    </div>
  )
}

const ModalHeader = ({
  title,
  children,
  hide,
}: {
  title?: string
  children?: ReactNode
  hide?: () => void
}) => {
  return (
    <div className={cx('ModalHeader')}>
      <div className={cx('title')}>{title}</div>
      {children}
      <button className={cx('close')} onClick={hide} />
    </div>
  )
}

const ModalContent = ({ children }: { children: ReactNode }) => {
  return <div className={cx('ModalContent')}>{children}</div>
}

const ModalFooter = ({ children }: { children: ReactNode }) => {
  return <div className={cx('ModalFooter')}>{children}</div>
}

Modal.Header = ModalHeader
Modal.Content = ModalContent
Modal.Footer = ModalFooter

/* Compound Component */

export default Modal


//ex: Alert Modal
export const AlertModal = ({ id, text }: { id: string; text: string }) => {
  const { closeModal } = useSetModals()
  const closeThis = () => closeModal(id)

  return (
    <Modal id={id}>
      <Modal.Content>
        <p>{text}</p>
      </Modal.Content>
      <Modal.Footer>
        <button onClick={closeThis}>확인</button>
      </Modal.Footer>
    </Modal>
  )
}

콘텍스트를 활용한 모달 구현

Modal Provider

type ModalState = Map<string, ReactNode>
type ModalDispatchState = Dispatch<SetStateAction<ModalState>>

const ModalContext = createContext<ModalState>(new Map())
const ModalDispatchContext = createContext<ModalDispatchState>(() => {})


export const ModalContextProvider = ({ children }: { children: ReactNode }) => {
  const [modals, setModals] = useState<ModalState>(new Map())
  const modalValues = Array.from(modals.values())

  useEffect(() => {
    document.body.classList.toggle('no-scroll', modals.size > 0)
  }, [modals])

  return (
    <ModalContext.Provider value={modals}>
      <ModalDispatchContext.Provider value={setModals}>
        {children}
        <div id="modalRoot">
          {modalValues.map((children, i) => (
            <Fragment key={i}>{children}</Fragment>
          ))}
        </div>
      </ModalDispatchContext.Provider>
    </ModalContext.Provider>
  )
}

• 모달을 모달 id → ReactNode 상태로 관리

export const useSetModals = () => {
  const setModals = useContext(ModalDispatchContext)

  const openModal = useCallback((id: string, children: ReactNode) => {
    setModals(prev => {
      const newMap = new Map(prev)
      newMap.set(id, children)
      return newMap
    })
  }, [])

  const closeModal = useCallback((id: string) => {
    setModals(prev => {
      const newMap = new Map(prev)
      newMap.delete(id)
      return newMap
    })
  }, [])
  // const closeAll

  return {
    openModal,
    closeModal,
  }
}

• id와 리액트 노드를 받는 openModal과 id를 받아 모달을 제거하는 close 모달
• 이 방법의 장점은 모든 모달을 모달 콘텍스트 중앙에서 관리할 수 있다는 점. 이러한 장점으로, 모달 개수에 따른 페이지 스크롤 제거 처리를 할 수 있을 뿐만 아니라 모달의 개수를 제한하거나 추가적인 기획에 유용하게 대처할 수 있음
• 하지만 단점도 있음. 사용할 때 아래 코드처럼 사용하게 되는데, 이렇게 되면 모달안의 상태는 openAlertModal을 사용할 때 결정되며 업데이트가 일어나지 않음

// openAlertModal을 호출하는 시점에 id와 text가 결정
const AlertTrigger = ({ id, text }: { id: string; text: string }) => {
  const { openModal } = useSetModals()

  const openAlertModal = () => {
    openModal(id, <AlertModal id={id} text={text} />)
  }
  return <button onClick={openAlertModal}>얼럿 띄우기</button>
}

Create Portal

const Modal = ({
  hideOnClickOutside = false,
  children,
  opened,
  hide,
}: {
  hideOnClickOutside?: boolean
  children: ReactNode
  opened: boolean
  hide: () => void
}) => {
  const stopPropagation = (e: SyntheticEvent) => e.stopPropagation()

  return opened
    ? createPortal(
        <div className={cx('Modal')} onClick={hideOnClickOutside ? hide : undefined}>
          <div className={cx('inner')} onClick={stopPropagation}>
            {children}
          </div>
        </div>,
        document.querySelector('#modalRoot')!,
      )
    : null
}

• 모달을 여는 createPortal 코드가 모달 함수 내부에 있음

const useModal = () => {
  const [opened, toggleModal] = useState(false)
  const openModal = useCallback(() => {
    toggleModal(true)
  }, [])
  const closeModal = useCallback(() => {
    toggleModal(false)
  }, [])

  return {
    opened,
    openModal,
    closeModal,
  }
}

• 모달의 상태가 전역적으로 공유되지 않기 때문에 모달이 열릴지 말지에 대한 상태만 모달에게 제공해 주면 됨
• 이렇게 하면 모달이 react jsx 내부에 있기 때문에 상태가 항상 반영된다.

const ConfirmTrigger = ({ id, children }: { id: string; children: ReactNode }) => {
  const { opened, openModal, closeModal } = useModal()
  const [confirmed, setConfirmed] = useState<boolean | null>(null)

  return (
    <>
      <button onClick={openModal}>확인모달열기 {confirmed ? '확인됨' : '확인안됨'}</button>
      <ConfirmModal
        opened={opened}
        confirmed={confirmed}
        onConfirm={() => {
          setConfirmed(true)
          closeModal()
        }}
        onCancel={() => {
          setConfirmed(false)
          closeModal()
        }}
        hide={closeModal}
      >
        {children}
      </ConfirmModal>
    </>
  )
}

• 하지만, 이렇게 되면 모달을 많이 가지고 있는 컴포넌트의 경우에는 jsx 부분에 모달이 많아져 가독성이 떨어질 수 있다.
• 또한, 각각의 모달을 중앙에서 관리하고있지 않기 때문에 모달 개수를 컨트롤하거나 모달이 열려있는지 확인하기 어렵다.

const mutationObserverOption: MutationObserverInit = {
  childList: true,
  subtree: false,
}

const ModalRoot = () => {
  const ref = useRef<HTMLDivElement>(null)

  useEffect(() => {
    let observer: MutationObserver
    if (ref.current) {
      observer = new MutationObserver(() => {
        const size = ref.current?.childNodes.length || 0
        document.body.classList.toggle('no-scroll', size > 0)
      })
      observer.observe(ref.current, mutationObserverOption)
    }

    return () => {
      observer.disconnect()
    }
  }, [])

  return <div id="modalRoot" ref={ref} />
}

• 위 코드에서 현재 모달이 열려있는지 확인하고 위해 mutationObserver 를 사용했음
  • modalRoot를 감시하며 자식이 추가될 때마다 스크롤을 제거