NextJS에 간단한 모달창 띄우기(next : 16.2.2 ver, react : 19.2.4 ver)
NextJS에 간단한 모달을 띄우는 방법 입니다. 아래는 이번글에서 작성한 코드의 dependencies 및 devDependencies입니다. "dependencies" : { "next" : "16.2.2" , "react" : "19.2.4" , "react-dom" : "19.2.4" }, "devDependencies" : { "@biomejs/biome" : "2.2.0" , "@types/node" : "^20" , "@types/react" : "^19" , "@types/react-dom" : "^19" , "typescript" : "^5" } 폴더 및 파일 구조 src |-app | |- page.tsx |- component |- modal |- TestModal.module.css |- TestModal.tsx page.tsx파일은 루트 페이지로 "Open Modal"로 작성된 버튼이 하나만 있습니다. 해당 버튼을 누르게 되면 "TestModal.tsx"페이지가 모달창으로 열립니다. // src\app\page.tsx 'use client' ; import { TestModal } from "@/component/modal/TestModal" ; import { useState } from "react" ; export default function Home () { // 모달창의 상태를...