병렬 세그먼트

Next.js의 병렬 세그먼트(@archive)는 특정 경로에 대해 독립적인 UI 조각을 렌더링하기 위해 설계된 기능입니다. 병렬 세그먼트 내부의 layout.jsx가 /archive/2023 경로에서만 렌더링되고 /archive에서는 렌더링되지 않는 이유는 라우팅의 구조와 동작 방식 때문입니다. 아래에서 이를 자세히 설명하겠습니다.

---

1. 병렬 세그먼트의 동작 원리

병렬 세그먼트란?

병렬 세그먼트는 같은 URL의 서로 다른 부분을 동시에 렌더링할 수 있도록 도와줍니다. 병렬 세그먼트는 특정 디렉토리(예: @archive) 내부에서만 동작하며, 상위 레이아웃에 독립적으로 작동합니다.

렌더링 규칙

• /archive:
  • **app/archive/layout.jsx**와 **app/archive/page.jsx**가 렌더링됩니다.
  • 병렬 세그먼트(@archive)는 렌더링되지 않습니다.
• /archive/2023:
  • **app/archive/layout.jsx**와 app/archive/@archive/layout.jsx, 그리고 **app/archive/@archive/page.jsx**가 렌더링됩니다.

이유

1. 병렬 세그먼트는 해당 세그먼트 경로에만 적용됩니다.
   • /archive는 병렬 세그먼트를 활성화하지 않습니다. 병렬 세그먼트는 /archive/[slug] 같은 구체적인 경로에서만 작동합니다.
2. 병렬 세그먼트는 독립적인 경로를 분리하여 관리하도록 설계되었습니다.
   • /archive는 일반 레이아웃과 페이지를 기준으로 작동합니다.
   • 병렬 세그먼트 내부의 레이아웃은 해당 세그먼트와 관련된 경로(/archive/[slug])에만 렌더링됩니다

 

 

Next.js에서 병렬 세그먼트(@segment)가 경로와 독립적으로 작동한다는 것은, 병렬 세그먼트는 자신의 경로와 해당 경로에 연결된 컴포넌트만 처리하도록 설계되었다는 의미입니다. 즉, 병렬 세그먼트는 상위 경로(/archive)에서 자동으로 활성화되지 않고, **명시적으로 관련된 하위 경로(/archive/2023 등)**에서만 동작합니다.

 

app/
  archive/
    layout.jsx           <- 상위 레이아웃
    page.jsx             <- /archive 경로의 페이지
    @archive/
      layout.jsx         <- 병렬 세그먼트의 레이아웃
      page.jsx           <- 병렬 세그먼트 경로(/archive/[slug])의 페이지

 

 

• /archive 경로:
  • **app/archive/layout.jsx**와 **app/archive/page.jsx**가 렌더링됩니다.
  • **@archive/layout.jsx**는 병렬 세그먼트에 관련된 경로가 아니므로 렌더링되지 않습니다.
• /archive/2023 경로:
  • **app/archive/layout.jsx**가 렌더링됩니다.
  • 동시에 **app/archive/@archive/layout.jsx**도 렌더링됩니다.
  • @archive/layout.jsx는 병렬 세그먼트의 역할을 하므로, 이 경로에서만 활성화됩니다.

 

@archive내부에 header를 만들어서 layout에 넣을 생각이었는데

하위에 세그먼트가 달려야지 해당하는 layout이 들어간다고 하여

상위에 있는 layout에 넣기로 결정했다