next.js에서 모달을 띄워주고 싶을 땐 패러렐 라우트를 사용하면 된다.
패러랠 라우트를 만들어 줄 때 마찬가지로 디렉토리를 만들어 주면된다.
하지만 네이밍을 조금 다르게 지어야 하는데 디렉토리 가장 앞에 @를 붙여주면 된다.
예를들어
(beforeLogin) 아래 하위 폴더를 만들어준다고 하면, 이런식으로 만들면 된다.
(beforeLogin)
signup
page.tsx
signin
page.tsx
@modal
page.tsx그리고, RootLayout parameter에 modal을 추가해주면 되는데 코드로 보면 다음과 같다.
export default function RootLayout({
children,
}: {
children: React.ReactNode,
modal:React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>
<div className={styles.container}>
{children}
{modal}
</div>
</body>
</html>
)
}패러랠 라우트는 페이지를 동시에 2개 보여주는 것과 같다.
next.js 에서 디렉토리는 하나의 페이지를 의미하기 때문에 2가지 페이지를 동시에 보여주는 것과 같다고 할 수 있다.
그런데 패러렐 라우트를 사용하려면 같은 폴더상에 위치 해야된다.
현재 나의 RootLayout.tsx 파일이 src 바로 안에 있고, 내가 만든 @modal 폴더는 src-(beforeLogin)-@modal 에 위치하고 있으므로 패러랠 라우트를 적용할 수 없다.
따라서 (beforeLogin) 안에 layout을 하나 더 만들어야 한다.
import { ReactNode } from "react"
type Props = {children : ReactNode, modal : ReactNode }
export default function Layout({children,modal}:Props) {
return (
<div>
{children}
{modal}
</div>
)
}
