Parallel Routes

김현학·2023년 10월 2일

NEXT Routing Concepts

목록 보기

9/11

목표

Next 공식 문서의 내용에 따라
하나의 Layout에 다양한 페이지를 병렬적으로 위치시키는 방법을 소개한다.

내용

서론

동시 또는 조건적으로 하나 이상의 페이지를 단일 레이아웃에 렌더링 할 수 있다. 단일 페이지에 상태 변화가 매우 밀집된 경우 유용하게 사용할 수 있다.

본론

Convention

Parallel Routing은 layout에서 props로 전달받은 slot을 배치하는 것으로 구현한다. slot을 전달받기 위해 상위 segment를 @folderName과 같은 형식으로 정의하면 된다.

export default function Layout(props: {
  children: React.ReactNode
  analytics: React.ReactNode
  team: React.ReactNode
}) {
  return (
    <>
      {props.children}
      {props.team}
      {props.analytics}
    </>
  )
}

상태에 따라 조건부 렌더링도 손쉽게 구현할 수 있다.

주어진 URL에 대해 적절한 slot을 표현할 수 없는 경우,
정의된 default 파일을 대신 보여준다.

예를 들어, 위와 같이 @auth 슬롯은 내부적으로 /login 또는 /signup segment를 포함하고, layout은 auth 슬롯을 포함하는 상황이다.

app/layout.tsx

export default async function Layout(props: {
  // ...
  auth: React.ReactNode
}) {
  return (
    <>
      {/* ... */}
      {props.auth}
    </>
  )
}

이를 위해 default 파일에서 null을 반환하도록 정의하면,
/login 경로를 통해 login segment에 접근할 떄에만 Modal이 표현된다.

Navigation을 통해 렌더링한 세그먼트이기 때문에
Modal을 삭제하려면 어떠한 방법으로든 경로만 변경하면 된다.

Conditional Routes

다음 코드와 같이 조건을 걸면
동일한 위치에 표현될 slot의 내용을 다르게 정의할 수 있다.

app/layout.tsx

import { getUser } from '@/lib/auth'
export default function Layout({
  dashboard,
  login,
}: {
  dashboard: React.ReactNode
  login: React.ReactNode
}) {
  const isLoggedIn = getUser()
  return isLoggedIn ? dashboard : login
}