인프런 커뮤니티 질문&답변

안녕하세요 제로초님.

Parallel Routes에 대하여 질문있습니다

(공식문서 폴더구조)

우선 공식문서대로

위와같은 폴더구조로 한 후

export default function Layout({
  children,
  team,
  analytics,
}: {
  children: React.ReactNode
  analytics: React.ReactNode
  team: React.ReactNode
}) {
  return (
    <>
      {children}
      {team}
      {analytics}
    </>
  )
}

Layout에 team과 analytics를 props로 주게되면

team과 analytics에 있는 page.js가 잘 렌더링 되는 것을 확인하였습니다.

그래서 이것을 강의에 응용해보려고 했습니다.

(강의 폴더구조 및 응용)

src/app/(afterLogin)/@team

(afterLogin)폴더에 @team 폴더를 만들고 그 안에 default.tsx랑 page.tsx파일을 만들었습니다. default.tsx

파일이 없으면 404 not found 가 뜹니다.

그 후 AfterLoginLayout에 team을 props로 두어 렌더링하였습니다. 결과는 default.tsx가 렌더링 되었습니다.

src/app/(afterLogin)/layout.tsx

type Props = { children: ReactNode; team: ReactNode};
export default async function AfterLoginLayout({ children, team }: Props) {
  return (
<>
      {children}
      {team}
    </>
  );
}

공식문서에서 default.tsx는

"초기 로드 또는 전체 페이지 다시 로드 중에 일치하지 않는 슬롯에 대한 폴백으로 렌더링할 default.js 파일을 정의할 수 있습니다."

즉 파일을 찾지 못하여 default.tsx를 렌더링 한다는 말이라고 이해했습니다.

즉 궁금한 것은 공식문서 폴더구조에서는 @team폴더의 page.tsx를 렌더링하는 반면 강의 폴더구조에서는 page.tsx를 렌더링하지 않고 default.tsx를 렌더링하는지 궁금합니다.

해당 강의에서 설명해주신 것 같아 여러번 보았지만 저의 이해력이 안좋아 질문드립니다. ㅜㅜ

항상 좋은강의 감사드립니다!