parallel + intercepting 라우트
- 병렬 라우트와 함께 사용하면 모달에 대해 다음이 가능합니다:
- 모달 콘텐츠를 URL을 통해 공유 가능하게 합니다.
- 페이지를 새로고침할 때 모달을 닫는 대신 컨텍스트를 유지합니다.
- 이전 라우트로 가는 대신 뒤로 이동하여 모달을 닫습니다.
- 앞으로 이동하여 모달을 다시 엽니다.
- 로그인 후 쉽게 직전 페이지로 이동할 수 있습니다.
app디렉토리의layout에 병렬 라우트(slot)을 prop로 추가합니다.
이때 prop 이름은 병렬 라우트 디렉토리 이름과 같기만 하면 됩니다.
루트 layout에 병렬 라우트를 추가해야 페이지에 나타나고, props로 사용할 수 있습니다.// app/layout.tsx export default function RootLayout({ children, auth, }: { children: React.ReactNode auth: React.ReactNode }) { return ( <html lang="en"> <body className={inter.className}> {children} {auth} </body> </html> ) }app에 병렬 라우트 디렉토리를 만듭니다.- 반드시
@병렬라우트안에default파일을 만듭니다. 간단히 null을 반환하도록 할 수도 있습니다. // app/@auth/default.tsx export default function Default() { return null; }@병렬라우트안에 intercepting 라우트 디렉토리를 만듭니다.
intercepting 라우트 이름은 위치를 나타내는()를 제외하고 intercept할 라우트 이름과 같아야합니다.()intercepting 라우트안에page파일을 만듭니다. Modal로 감싸는 부분을 제외하고, 반드시 intercept할 라우트의page와 return하는 UI가 같아야 합니다.// app/@auth/(.)signin/page.tsx export default function Page() { return ( <Modal> <SigninForm /> </Modal> ) }// app/signin/page.tsx export default function Page() { return <SigninForm /> }
전체 디렉토리 구조는 다음과 같습니다.
intercepting 라우트 page의 UI를 감싸는 컴포넌트(Modal.tsx)의 이름은 무엇이든지 상관없습니다.
├ app
│ ├── login
│ │ ├── page.tsx
│ ├── @auth
│ │ ├── (.)login
│ │ │ ├── page.tsx
│ │ ├── default.tsx
│ ├── layout.tsx
│ ├── page.tsx
├── components
│ ├── SigninForm.tsx
│ ├── Modal.tsx'Next.js' 카테고리의 다른 글
| Next.js의 클라이언트 컴포넌트 경계에 대해 (1) | 2024.04.03 |
|---|
