React에서의 Dialog

React에서 Dialog 사용하기

React에서 useRef를 사용하여 구현해보았다. UI style만 수정되면 실무에서도 적용할 수 있을것 같다.

 

예제

import { useRef } from 'react'


const dialog = (): JSX.Element => {
   const dialogRef = useRef<HTMLDialogElement>(null)


   const openDialog = () => {
       if (dialogRef.current === null) return
       dialogRef.current.showModal()
   }


   const closeDialog = () => {
       if (dialogRef.current === null) return
       dialogRef.current.close()
   }


   return (
         <div>
           <div>
               <button onClick={openDialog}>open</button>
           </div>
           <dialog ref={dialogRef}>
               <div>Modal Box</div>
               <button onClick={closeDialog}>close</button>
           </dialog>
          </div>
   )
}


export default dialog