Dialog Modal을 사용해보자

 나는 모달창을 띄우고 싶다. 

 

팀 프로젝트에서 새로운 게시글을 등록하려고 할 때 모달창을 띄워서 거기서 작성하려 함

daisyUi를 사용하고 있어서 거기서 모달창 디자인 따왔다.

<button className="btn" onClick={()=>window.my_modal_3.showModal()}>open modal</button>
<dialog id="my_modal_3" className="w-full p-0 rounded-lg shadow-lg">
  <form method="dialog" className="relative p-10 rounded-lg shadow-lg text-neutral-600modal-box">
    <button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
    <h3 className="font-bold text-lg">Hello!</h3>
    <p className="py-4">Press ESC key or click on ✕ button to close</p>
  </form>
</dialog>

window.my_modal_3.showModal() 여기서 오류남 없대요 

'Window & typeof globalThis' 형식에 'my_modal_3' 속성이 없습니다.

나는 바닐라 자바스크립트가 아닌 타입스크립트를 사용하니 오류가 뜨는거겠쥐

훔.. 그럼 dialog태그에 대해서 찾아봐야쥬

 

dialog태그를 넣는 것 자체로는 아무 기능을 하지 않는다...

js로 작동시켜줘야 한다. 나는 ts로 하고 있다. 타입을 정해줘야 한다.

...... 옥히!

 

mdn문서를 본다!

 

음.. 아닌 것 같다 다른 걸 찾아보자

 

블로그 여기저기를 찾다가 리액트는 dom 직접 건드리지 말고 useRef사용해 봄

const Modal = () => {
  const modalRef = useRef()
    
  return (
    <>
      <button className="btn" onClick={()=>modalRef.current.showModal()}>
      open modal
      </button>
      <dialog ref={modalRef} className="w-full p-0 rounded-lg shadow-lg">
        <form method="dialog" className="relative p-10 rounded-lg shadow-lg text-neutral-600modal-box">
         <button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
         <h3 className="font-bold text-lg">Hello!</h3>
         <p className="py-4">Press ESC key or click on ✕ button to close</p>
        </form>
      </dialog>
    </>
  )

 

오류1) 'modalRef.current'은(는) 'undefined'일 수 있습니다.

오류2) 'MutableRefObject <undefined>' 형식은 'LegacyRef<HTMLDialogElement> | undefined' 형식에 할당할 수 없습니다.
  'MutableRefObject<undefined>' 형식은 'RefObject <HTMLDialogElement>' 형식에 할당할 수 없습니다.
    'current' 속성의 형식이 호환되지 않습니다.
      'undefined' 형식은 'HTMLDialogElement | null' 형식에 할당할 수 없습니다.

 

흠냐 또 왜그런댜  

<HTMLDialogElement> 추가해 줘도 안 사라짐 찾아보니 useRef <HTMLDialogElement>(null)을 넣으라함 

넣으니 2번 오류 사라짐 하지만 1번 오류에서

'modalRef.current'은(는) 'null'일 수 있습니다.

??? 아!

modalRef.current?. showModal()해주니까 작동이가 잘됨 굿굿

 

최종코드

const Modal = () => {
  const modalRef = useRef<HTMLDialogElement>(null);

  return (
    <>
      <button
        className="border-4 rounded-full p-3"
        onClick={() => modalRef.current?.showModal()}
      >
        open modal
      </button>
      <dialog ref={modalRef} className="w-full p-0 rounded-lg shadow-lg">
        <div>
          <form
            method="dialog"
            className=" relative p-10 rounded-lg shadow-lg text-neutral-600modal-box"
          >
            <button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
              X
            </button>
            <h3 className="font-bold text-lg">hello!</h3>
            <p className="py-4">Press ESC key or click on ✕ button to close</p>
          </form>
        </div>
      </dialog>
    </>
  );
};

 

 

 

 

dialog 적용 참조

 

[리액트]dialog 태그로 모달 만들기

오류 해결 참조

[React] MutableRefObject와 LegacyRef