Front/Next
패럴렐 라우트
akii
2024. 10. 21. 15:08
: 하나의 화면에 여러개의 페이지 컴포넌트들을 한꺼번에(병렬로) 렌더링
슬롯: 병렬로 렌더링 될 페이지 컴포넌트를 보관하는 폴더, @ 사용
슬롯 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 페이지를 설정