모달 설정 하기

app
- mainpage //모달 출력 되는 곳
  >page.tsx
  - mainimg
    >page.tsx //모달 컴포넌트 불러오는 곳

-components
 >modal.tsxa //모달 작성

 

mainpage > page

export default function Page(){
    return 
    <div> mainimg
        <div id="modal_root"></div>
    </div>
}

 

mainimg > page

'use client'
import Modal from "@/app/components/modal";
import { useState } from "react";

export default function Page(){
    const [btnClick, setBtnClick] =  useState(false);
    const handleClick = ()=>{
        setBtnClick(true);
        console.log(btnClick);
    }

    const handleCloseModal = () => {
        setBtnClick(false);
    };
    return <div> mainimg
         <button onClick={handleClick}>누르세요!</button>
         {btnClick  && (  <Modal btnClick ={btnClick} >
            안녕하세요
            <button onClick={handleCloseModal}>닫기</button>
        </Modal>)}
      
    </div>
}

 

modal

"use client";

import { ReactNode, useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";

export default function Modal({
  children,
  btnClick,
}: {
  children: ReactNode;
  btnClick: boolean;
}) {
    // const [btn, setBtn] = useState(btnClick);
  const dialogRef = useRef<HTMLDialogElement>(null);
    console.log(btnClick);
  
    useEffect(() => {
    if (btnClick === true) {
        dialogRef.current?.open
      dialogRef.current?.showModal();
      dialogRef.current?.scrollTo({
        top: 0,
      });
    }
  }, [btnClick]);

  return createPortal(
    <dialog ref={dialogRef}>{children}</dialog>,
    document.getElementById("modal_root") as HTMLElement
  );
}

mainimg > page 에서 props를 전달 받아서 그 값에 따라 모달 출력

 

에러

document is not defined

서버에서 렌더링될 때, document 객체가 정의되어 있지 않기 때문에 발생

useEffect를 사용 하여 브라우저에서만 모달을 렌더링하도록 설정