NextJS의 병렬 라우팅

NextJS에서는 사이트의 일부가 요청된 URL에 따라 다양한 콘텐츠를 표시하도록 만들 수 있습니다. 이를 병렬(Parallel) 라우팅이라고 합니다.

예제를 통해 살펴보겠습니다. 다음과 같은 사이트 레이아웃이 있다고 가정해 보겠습니다:

export default function RootLayout({children}) {
	return (
		<html lang="en">
			<body>
				<header>
					header
				</header>
				<main>
					{children}
				</main>
				<footer>
					footer
				</footer>
			</body>
		</html>
	);
}

헤더에 동적 정보가 출력되도록 하고 싶다고 가정해 보겠습니다. URL이 /users일 때는 사용자 컴포넌트가, URL이 /posts일 때는 게시물 컴포넌트가 출력되도록 합니다.

이러한 병렬 라우팅을 위해서는 이름을 @ 기호로 시작하는 특별한 폴더를 만들어야 합니다. 예를 들어 폴더 이름을 @info로 지정하겠습니다.

이 폴더에 두 개의 컴포넌트를 배치합니다. 하나는 /users/ 폴더에 사용자를 표시하기 위한 것이고, 다른 하나는 /posts/ 폴더에 게시물을 표시하기 위한 것입니다. 다음과 같은 파일 구조가 됩니다:

/app/
- /@info/
  - /users/
    - page.jsx
  - /posts/
    - page.jsx

이제 사이트 레이아웃에 삽입을 위한 특별한 명령을 작성해야 합니다. 이를 위해 특별한 동적 슬롯을 사용해야 합니다.

이것이 무엇인지 이해하기 위해, 먼저 레이아웃 함수의 매개변수를 살펴보세요:

export default function RootLayout({children}) {
	return (
		
	);
}

매개변수로 객체가 전달되고, 그 객체에서 사이트 콘텐츠를 children 변수로 추출한다는 점에 유의하세요.

이 객체에는 다른 키가 있을 수도 있습니다. 이 키들은 이름이 @로 시작하는 폴더에 해당합니다.

이 경우 @info 폴더가 있으므로, info 변수를 사용할 수 있으며, 이 변수는 URL에 따라 사용자 또는 게시물 컴포넌트 중 하나의 텍스트를 포함하게 됩니다. 이 변수를 얻어보겠습니다:

export default function RootLayout({children, info}) {
	return (
		
	);
}

이제 레이아웃의 마크업 내부에서 info 변수를 출력할 수 있습니다. 이 위치에 URL에 따라 컴포넌트 중 하나의 텍스트가 삽입됩니다:

export default function RootLayout({children, info}) {
	return (
		<html lang="en">
			<body>
				<header>
					<div>
						{info}
					</div>
				</header>
				<main>
					{children}
				</main>
				<footer>
					footer
				</footer>
			</body>
		</html>
	);
}

오른쪽 사이드바를 위한 동적 슬롯을 만드세요.

왼쪽 사이드바를 위한 동적 슬롯을 만드세요.