[Modern][리액트] 한국인이 만든 국산 모달 소개

기존의 리액트 모달 라이브러리는 유연함과 확장성을 가지고 있지만 너무 무겁다는 단점이 있습니다.

문서가 영문이다보니 어떤 기능이 있는지도 찾기 어렵죠.

 

모달의 핵심적인 기능들을 구현했습니다. 가장 최신의 문법으로 dialog를 이용한 모달입니다.

콩글리쉬까지 적용한 한국인의 소울이 담긴 모달 라이브러리를 소개합니다.

1. 핵심 기능

1-1. 백드롭

백드롭은 모달창 바깥의 외부 공간을 의미합니다.

백드롭은 외부와의 상호작용을 차단하는 것을 목표로 합니다.

CSS로 Blur, 화면 가리개 등 프로젝트에 알맞는 디자인을 적용할 수 있습니다.

• 모달 바깥 흐리게 혹은 안보이게 적용 가능 (투명도 가능)
• 바깥 클릭시 모달창이 닫히게 구현 가능
• 백드롭 커스텀 CSS 적용 가능
• 모달 바깥과의 상호작용 차단

1-2 모달

모달은 화면 위에 떠오르는 새로운 창입니다.

브라우저 상의 새로운 창이 아닌 HTML, CSS 상으로 앞에 보이는 것처럼 표현됩니다.

 

Top-Layer 기능을 사용해 CSS z-index를 쓰지않고 모달을 구현했습니다.

다른 컴포넌트와 z-index가 충돌하는 경우 없이 언제나 화면 앞에 표시됩니다.

• 모달 커스텀 CSS 적용 가능
• Slot을 이용한 커스텀 HTML 구조 구현
• 열리기 전 이벤트, 닫히기 전 이벤트 기능

2. 사용법

2-1 설치

npm i @aierse/react-modal

2-2 문법

모달 열기+닫기 제어

open 속성으로 모달을 제어할 수 있습니다.

import Modal from '@aierse/react-modal'
import { useState } from 'react'

export default function Example() {
  const [isOpen, setIsOpen] = useState(false)

  function openChange() {
    setIsOpen((prev) => !prev)
   }

  return (
    <>
      <div>
        <h1>여기는 모달을 여는 부분입니다.</h1>
        <button onClick={openChange}>모달 열기</button>
      </div>
      <Modal open={isOpen}>
        <h1>여기는 모달 부분입니다.</h1>
        <h2>슬롯을 활용해 양방향통신이 가능하게 구현했습니다.</h2>
        <button onClick={openChange}>닫기</button>
      </Modal>  
    </>
  )
}

모달 백드롭 클릭 시 닫힘

backdropProps의 onClick에 닫기 이벤트를 할당하면 됩니다.

닫힘 뿐 아니라 백드롭 클릭 시 이벤트와 관련된 함수를 할당할 수 있습니다.

import Modal from '@aierse/react-modal'
import { useState } from 'react'

export default function Example() {
  const [isOpen, setIsOpen] = useState(false)

  function openChange() {
    setIsOpen((prev) => !prev)
   }

  return (
    <>
      <div>
        <h1>여기는 모달을 여는 부분입니다.</h1>
        <button onClick={openChange}>모달 열기</button>
      </div>
      <Modal
        open={isOpen}
        {/* backdropProps로 백드롭에 속성을 전달할 수 있습니다. */}
        backdropProps={{
            onClick: openChange
        }}
      >
        <h1>여기는 모달 부분입니다.</h1>
        <h2>슬롯을 활용해 양방향통신이 가능하게 구현했습니다.</h2>
        <button onClick={openChange}>닫기</button>
      </Modal>  
    </>
  )
}

모달 CSS 및 백드롭 CSS + Tailwind 스타일

module.css 방식과 Tailwind 방식 모두 가능합니다.

import Modal from '@aierse/react-modal'
import { useState } from 'react'
import { styles } from 'app.module.css'

export default function Example() {
  const [isOpen, setIsOpen] = useState(false)

  function openChange() {
    setIsOpen((prev) => !prev)
   }

  return (
    <>
      <div>
        <h1>여기는 모달을 여는 부분입니다.</h1>
        <button onClick={openChange}>모달 열기</button>
      </div>
      
      <Modal 
        open={isOpen}
        
        {/* backdropProps로 백드롭에 속성을 전달할 수 있습니다. */}
        backdropProps={{
          className: styles.backdrop
        }}
        
        {/* HTMLAttributes로 모달에 속성을 전달할 수 있습니다. */}
        className: 'p-4 flex flex-column'
      >
        <h1>여기는 모달 부분입니다.</h1>
        <h2>슬롯을 활용해 양방향통신이 가능하게 구현했습니다.</h2>
        <button onClick={openChange}>닫기</button>
      </Modal>  
    </>
  )
}

2-3 Props 세부 속성

 

코드를 작성하면서 문서를 보지않고 사용할 수 있도록 간략한 설명을 적어두었습니다.

 

1. <Modal> 에 마우스 커서를 올리면 props 속성과 타입이 정의되어있습니다.

2. 속성에 마우스 커서를 올리면 간략한 설명이 표시됩니다.

 

• open: boolean = 모달 열기 닫기 제어
• beforeOpen: Function = 모달 열리기 전 이벤트
• beforeClose: Function = 모달 닫히기 전 이벤트
• backdropProps: HTMLAttributes = 백드롭 속성 (백드롭 스타일, 클래스 지정가능)
• props: HTMLAttributes = 모달 속성 (스타일, 클래스 지정가능)

3. 구현부

라이브러리의 핵심 구현부입니다. 관심이 없다면 패스하셔도 됩니다.

코드를 보시고 참고해서 사용하시면 됩니다.

 

GitHub - Aierse/aierse-react-modal

3-1 리턴 부분

<dialog ref={target} {...backdropProps}>
  <div onClick={(e) => e.stopPropagation()} {...props}>
    {children}
  </div>
</dialog>

3-2 열기 닫기 제어 부분

const target = useRef<HTMLDialogElement>(null)

useEffect(() => {
  if (open) {
    if (beforeOpen instanceof Function) {
      beforeOpen()
    }

    target.current?.showModal()
  } else {
    if (beforeClose instanceof Function) {
      beforeClose()
    }

    target.current?.close()
  }
}, [open, beforeOpen, beforeClose])

추천 포스트

리액트 폴더 구조 우수 사례 - 아토믹 패턴

[VSCode] 협업시 프로젝트 환경설정 (.vscode 폴더)