기존 리액트처럼 한 페이지 내에 여러 컴포넌트들이 병렬적으로 있다고 생각해보자.

이것을 Next.js로 만든다면 어떻게 할까?

한 페이지에 두개의 컴포넌트 페이지가 있고, 각각 렌더링되는 형태를 상상할 수 있다.

사용법

slot 을 활용한다.

폴더명 앞에 @ 를 붙이면, 그 부모 폴더의 layout.tsx 파일에서 props로 사용할 수 있다.

➕ route group과 마찬가지로, URL 경로에 영향을 주지 않는다.

src/
├── app/
│   ├── home/
│   │   └── page.tsx   // home페이지
│   └── parallel/
│       ├── page.tsx   // parallel페이지
│				├── layout.tsx
│       └── @sidebar/  // slot -> 병렬 렌더링될 컴포넌트를 보관하는 폴더
│            └── page.tsx   // 병렬 렌더링될 컴포넌트 페이지 파일
│            └── layout.tsx   // slot 내 page가 상위 layout.tsx 파일에 prop으로 전달됨
...                              -> 해당 props의 이름은 @ 뒤 이름으로 지정된다.

//layout.tsx
import { ReactNode } from "react";

export default function Layout({ // 자동으로 받아온 sidebar
	children, 
	sidebar 
	}: { 
	children: ReactNode; 
	sidebar: ReactNode; 
}) {
  return <div>{children}{sidebar}</div>;
}