패럴렐 라우트

: 하나의 화면에 여러개의 페이지 컴포넌트들을 한꺼번에(병렬로) 렌더링

 

슬롯: 병렬로 렌더링 될 페이지 컴포넌트를 보관하는 폴더, @ 사용

슬롯 page.tsx 파일을 감싸는 layout.tsx 파일에서 슬롯의 이름으로 props를 전달받아 병렬로 렌더링

📂 parallel
├── 📂@feed
│   │   ├── 📂 setting
│   │   │   └── 📑 page.tsx
│   │   └── 📑 page.tsx
├── 📂@sidebar
│   │   ├── 📑 default.tsx
│   │   └── 📑 page.tsx
├── 📑 default.tsx
├── 📑 page.tsx
└── 📑 layout.tsx

// url주소/parallel 페이지
export default function Layout({
  children,
  sidebar,
  feed,
}: {
  children: ReactNode;
  sidebar: ReactNode;
  feed: ReactNode;
}) {
  return (
    <div>
      {sidebar}
      {feed}
      {children}
    </div>
  );
}

 

<Link href={"/parallel/setting"}>parallel/setting</Link>

// url주소/parallel/setting 페이지
@sidebar 			//page.tsx 페이지 내용
@feed/setting 		//@feed/setting/page.tsx 페이지 내용
parallel 			//parallel/page.tsx 페이지 내용

// url주소/parallel/setting 페이지 새로고침시
@sidebar/default	///sidebar/default.tsx 페이지 내용
@feed/setting		//@feed/setting/page.tsx 페이지 내용
parallel/default	//parallel/default.tsx 페이지 내용

- Link 태그 이용해서 페이지 전환시 특정 슬롯 밑의 추가적인 경로는 해당 슬롯의 페이지만 업데이트
- 나머지 슬롯의 페이지는 이전상태유지(해당경로의 내용이 없기때문에)
- 추가경로에서 새로고침시 이전상태를 불러올수 없기 때문에 오류 발생하므로 기본값으로 default.tsx 페이지를 설정