Nextjs Routing(Parallel Routes, Intercepting Routes)

Parallel Routes

Parallel Routes는 동시에 또는 조건부로 동일한 레이아웃 내에서 하나 이상의 페이지를 렌더링할 수 있게 해준다. 이는 앱의 매우 동적인 섹션인 대시보드나 소셜 사이트의 피드와 같은 경우에 유용하다.

예를 들어, 대시보드를 고려해보면 병렬 루트를 사용하여 팀 및 분석 페이지를 동시에 렌더링할 수 있다.

Parallel Routes는 명명된 슬롯을 사용하여 생성됩니다. 슬롯은 @폴더 관례로 정의된다. 아래 예시는 @team 및 @user 두 개의 슬롯을 정의한다.

슬롯은 공유 부모 레이아웃에 속성(props)으로 전달됩니다. 위의 예에서는 app/layout.js의 컴포넌트가 이제 @team 및 @user 슬롯 속성을 받아들이고, 이를 자식 속성(children prop)과 함께 병렬로 렌더링할 수 있다.

export default function RootLayout({
  children,
   user,
   team,
}: {
  children: React.ReactNode
  user: React.ReactNode
  team: React.ReactNode
}) {
  return (
      <html lang="en">
      <body className={inter.className}>{children}{user}{team}</body>
      </html>
  )
}

슬롯은 루트 세그먼트가 아니며 URL 구조에 영향을 미치지 않는다.

default.js

초기 로드 또는 전체 페이지 다시 로드 중에 일치하지 않는 슬롯에 대한 대체 항목으로 렌더링할 파일을 정의할 수 있다.

위와 같은 경로가 있다고 가정했을 경우 @team 폴더에는 settings라는 폴더가 있지만 @user의 경우는 폴더가 없다. 그래서 '/dasboard/settings/'에 접근 시 default.js가 없을 시 404에러가 발생하게 되는데 default.js 파일을 만들어줌으로써 이를 방지할 수 있다.

조건부 경로

Parallel Routes는 특정 조건에 따라 슬롯을 조건부로 렌더링할 수 있도록 허용한다. 예를 들어 사용자가 로그인되어 있는지 여부에 따라 /dashboard 또는 /login 페이지를 렌더링할 수 있다.

Streaming

Parallel Routes는 독립적으로 스트리밍될 수 있어 각 루트에 대해 독립적인 오류 및 로딩 상태를 정의할 수 있다.

Intercepting Routes

Intercepting Routes는 현재 레이아웃 내에서 애플리케이션의 다른 부분에서 루트를 로드할 수 있게 해준다. 이 라우팅 패러다임은 사용자가 다른 컨텍스트로 전환하지 않고 루트의 내용을 표시하고자 할 때 유용할 수 있다.

예를 들어, 피드에서 사진을 클릭할 때 해당 사진을 모달에서 표시할 수 있다. 이 경우 Next.js는 /photo/123 루트를 가로채고 URL을 마스킹하여 /feed 위에 오버레이한다.

그러나 공유 가능한 URL을 클릭하거나 페이지를 새로 고침하여 사진에 접근할 때에는 모달 대신 전체 사진 페이지가 렌더링되어야 한다. 이때는 라우트 가로채기가 발생하지 않아야 한다.

Intercepting Routes는 (..) 관례를 사용하여 정의할 수 있으며, 이는 상대 경로 관례 ../과 유사하지만 세그먼트를 위한 것이다.

다음과 같이 사용할 수 있다:

(.) : 동일한 레벨의 세그먼트와 일치
(..) : 하나 위 레벨의 세그먼트와 일치
(..)(..) : 두 레벨 위의 세그먼트와 일치
(...) : 루트 앱 디렉토리에서 세그먼트와 일치

예를 들어, 피드 세그먼트 내에서 (..)photo 디렉토리를 생성하여 피드 내부에서 사진 세그먼트를 가로챌 수 있다.

Modals

Intercepting Routes를 Parallel Routes와 함께 사용하여 모달을 만들 수 있다.

이 패턴을 사용하여 모달을 만들면 모달과 관련된 몇 가지 일반적인 문제를 극복할 수 있다. 다음과 같은 기능이 가능해진다.

모달 콘텐츠를 URL을 통해 공유 가능하게 함
페이지를 새로 고침할 때 모달을 닫는 대신 컨텍스트를 보존
이전 라우트로 이동하는 대신 모달을 닫음
앞으로 이동하는 경우 모달을 다시 열 수 있음

'Frontend (Next.js Tailwind Typescript) > Next.js' 카테고리의 다른 글

create-next-app (0)	2024.02.18
fetch의 기본 사용법 (0)	2024.02.16
Nextjs Routing(Router, Dynamic Routes, Route Group) (0)	2024.01.18
NEXT.JS의 이미지 최적화 그리고 비교분석 (5) (0)	2024.01.10
NEXT.JS의 이미지 최적화 그리고 배경이미지 (4) (0)	2024.01.09