[Routing] 08 Paraller Routes

페러랠 라우트 (Paraller Routes)

목차

1. 페러랠 라우트 정의
   1. 렌더링 예시
2. 사용법
   1. default.tsx
3. useSelectedLayoutSegments(s)

---

페러랠 라우트?

패러랠 라우트,
즉 병렬 라우팅을 사용하면 동일한 레이아웃에서 하나 이상의 페이지를 동시 혹은 조건부로 렌더링한다.

렌더링 예시

1. 동시 렌더링 예시

@team/page.js와 @analytics/page.js는 패러렐 라우트의 동일 레벨인 layout.js의 Props로 전달된다.
두 개가 동시에 공존할 수 있음을 보여주는 예시이다.

[독립적으로 스트리밍 -> 오류와 로딩상태도 독립적으로]

이들은 독립적으로 스트리밍되고, 독립적인 오류 및 로딩 상태를 정의한다.

2. 조건부 렌더링 예시

인증 상태와 같은 특정 조건하에 조건부로 렌더링을 할 수 있다.
URL에서 완전히 분리된 코드를 사용할 수 있는 것이 특징이다.

사용법

1. @folder 로 명명
2. props로 동일 레벨에 존재하는 layout.js로 전달된다.
3. URL 구조에 영향을 주지 않는다.

app
ㄴ @analytics
   ㄴ page.js
ㄴ @team
   ㄴ page.js
ㄴ layout.js
ㄴ page.js

이런 구조일 때

// app/layout.ts

type Props = {
  children: React.ReactNode;
  analytics: React.ReactNode;
  team: React.ReactNode;
}
export default function Layout({ children, analytics, team }: Props) {
	return (
		<>
			{ children }
			{ analytics }
			{ team }
		</>
	)
}

default.js

기본적으로 슬롯 내에서 렌더링되는 콘텐츠는 현재 URL과 일치한다.

일치하지 않는 슬롯의 경우, 혹은 새로 고침 시 default.js 파일을 렌더링하므로 필수적으로 있어야 한다.

// default.js

export default function Default() { 
  return null
}

useSelectedLayoutSegment(s)

로 경로 세그먼트를 읽어온다.
레이아웃 기준의 폴더들만 읽어준다.

'use client' import { useSelectedLayoutSegment } from 'next/navigation' 

export default async function Layout(props: { 
  //... 
  auth: React.ReactNode
}) { 
  const loginSegments = useSelectedLayoutSegment(); 
  // ...
}

• useSelectedLayoutSegment 는 문자열 하나만 반환
• useSelectedLayoutSegments 는 배열 반환
  

(이 글은 옵시디언에서 작성되었습니다.)