한입 -7

Parallel Route

• 한 화면에 여러 개의 page.tsx 를 병렬해주는 기능
• SNS, 관리자의 Dashboard같이 복잡한 UI에 적용
• @(폴더명) : 슬롯(Slot). 병렬로 렌더링 될 페이지 컴포넌트를 보관하는 폴더
• URL 경로에는 아무런 영향을 미치지 않음
• 다만, Parallel Route 를 타고 들어간 페이지에서 새로고침(F5)을 누를 경우, 404패이지가 뜨기 때문에, default.tsx 파일을 작성하는 것을 권장한다.

Intercepting Route

• 새로운 페이지가 기존 페이지 위에 뜨고 이전 버튼을 누르면 다시 이전 페이지로 복원되는 기능
• 인스타그램
• 폴더명: (.)a경로/b경로
  → 같은 이름의 폴더를 Intercept 한다는 뜻.
• Modal로 띄울 시,

// modal.tsx
export default function Modal({
  children,
}: {
  children: ReactNode
}) {
  return createPortal(
    <dialog>{children}</dialog>,
    document.getElementById('modal-root') as HTMLElement
  );
}

작성 후 루트 Layout 페이지에 추가

<div id="modal-root"></div>