Parallel Routes가 뭔데?
복잡해서 미뤄왔던 Parallel Routes, 이제는 알아볼 때가 되었다.
Parallel Routes의 정의
공식 문서에 따르면, Parallel Routes를 사용하면 동일한 레이아웃 내에서 하나 이상의 페이지를 동시에 렌더링하거나 조건부로 렌더링할 수 있다고 한다.
Parallel Routes의 구성 (Slots)
Parallel Routes는 slots
이라는 것을 사용해서 만들어지고,
이 slots은 @folder
의 규칙으로 정의할 수 있다고 한다.
예를 들어, @analytics, @team 처럼 정의할 수 있다.
slots은 공유된 부모 레이아웃에 props로 전달된다.
위의 사진을 보면 app/layout.tsx
가 @article
과 @users
를 props로 받아들이고, children
과 함께 병렬로 렌더링 할 수 있다.
export default function RootLayout({
children,
articles,
users,
}: Readonly<{
children: React.ReactNode;
articles: React.ReactNode;
users: React.ReactNode;
}>) {
return (
<html>
<body>
{children}
{articles}
{users}
</body>
</html>
);
}
참고로, slots는 URL 구조에 영향을 미치지 않는다고 한다.
예를 들어,
@users/list
의 경우@users
가 slot이므로 URL은/list
가 된다.
Active state와 navigation의 관계
NextJS는 각 slot의 활성 상태
(active state)를 추적하며, 이는 두 가지 navigation 방식에 따라 다르게 동작한다.
-
Soft Navigation: 클라이언트 사이드 라우팅 기능으로 페이지를 이동하는 방식이다. 이 경우 NextJS는 부분 렌더링을 통해 현재 URL과 관계없이 다른 slot들의 상태를 유지하면서, 변경이 필요한 slot만 업데이트한다.
-
Hard Navigation: URL을 직접 입력하거나 페이지를 새로고침하는 전통적인 페이지 이동 방식이다. 이 경우 NextJS는 현재 URL과 일치하지 않는 slot들의 상태를 파악할 수 없어, 해당 slot들은
default
파일을 보여주거나 해당 파일이 없다면404
페이지를 표시한다.
활성 상태(active state): 현재 화면에 표시되고 있는 slot의 상태를 의미한다.
부분 렌더링(partial rendering): 페이지 전체가 아닌 변경이 필요한 부분만 새로 그리는 렌더링 방식이다.
default 파일
위에서 설명했듯, Hard Navigation으로 페이지 이동 시 현재 URL과 일치하는 slot의 경로를 찾을 수 없다면 404 페이지가 렌더링 된다. 이러한 상황을 방지하기 위해 default 파일을 정의하여 대체 콘텐츠를 표시할 수 있다.
위 폴더 구조를 살펴보면, @users
slot에는 /about
경로가 있지만, articles
slot에는 없다. 따라서 해당 구조인 상태에서 /about
경로로 이동하면 (Hard Navigation으로) 404 페이지가 렌더링 된다.
이러한 상황을 방지하기 위해 아래와 같이 @articles slot에 default
파일을 정의하여 대체 콘텐츠를 표시할 수 있다.
이제 위 구조에서 /about
경로로 이동하면 @articles
slot의 default
파일이 렌더링
된다. 👍
useSelectedLayoutSegment(s)
useSelectedLayoutSegment 및 useSelectedLayoutSegments는 parallelRoutesKey
라는 매개변수를 받는다.
이것을 통해, slot 내의 활성 라우트 세그먼트를 읽을 수 있게 한다.
"use client";
import "./globals.css";
import Link from "next/link";
import { useSelectedLayoutSegment } from "next/navigation";
export default function RootLayout({
children,
articles,
users,
}: Readonly<{
children: React.ReactNode;
articles: React.ReactNode;
users: React.ReactNode;
}>) {
const usersSegment = useSelectedLayoutSegment("users");
console.log(usersSegment);
return (
...
)
Parallel Routes 활용하기
Parallel Routes를 활용하여 다음과 같은 상황을 구현할 수 있다.
- 특정 조건에 따라 라우트를 조건부로 렌더링하기
- 슬롯 내에
layout
파일을 생성하여 페이지 간 탭을 공유하기 - Intercepting Routes와 함께 사용하여 모달 만들기
- 각 라우트에 대해 독립적인 로딩/에러 UI 구현하기
마무리
폴더 구조도 복잡하고 뭔가 직관적이지 않아서 이해하기 어려웠다. 솔직히 아직까지는 Parallel Routes을 사용하면 어떤 점이 좋은지 잘 모르겠다.
다음에는 Intercepting Routes
를 공부하면서 정리하고, Parallel Routes와 함께 모달을 만들어보아야겠다.
참고&공부 자료
- NextJS 공식 문서 - Parallel Routes
- Learn Next.js Parallel Routes In 16 Minutes
- NextJS Parallel Routes Explained with a Simple Example
- 캐럿마켓 클론코딩