스벨트킷 +layout.svelte 응용(grouping, breaking out of layouts)

스벨트킷과 +layout.svelte

스벨트킷은 file-based routing(파일 기반 라우팅)을 지원한다.
즉 프로젝트의 src/routes 폴더 안의 폴더 구조를 기반으로 URL 경로를 자동으로 생성한다.
+layout.svelte 파일을 통해 nav bar와 같이 공통적인 컴포넌트의 레이아웃을 지정할 수 있다. (F.Y.I. +page.svelte의 파일은 이름 그대로 해당 경로에서 렌더링되는 페이지의 내용을 담는다.)

<!-- +layout.svelte -->
{top nav bar 내용}
<slot / >
<!-- +page.svelte의 내용이 들어감 -->
{footer 내용}

기본적으로 레이아웃은 라우팅 계층을 그대로 상속한다. 폴더 구조가 중첩됨에 따라 layout도 중첩되어 렌더링된다.

src/routes/
├ shop/
│ └ new_item/
│   └ detail/
│     ├ review/
│     │  └ +page.svelte
│     │  └ +layout.svelte0
│     └ +page.svelte
│     └ +layout.svelte
└ +layout.svelte 

예를 들어, /shop/new_item/detail/review에서는
root layout과 detail의 layout, review의 layout 세 가지가 모두 적용된다.
(/shop/new_item/detail의 경우 root layout과 detail의 layout만 적용됨)

Grouping

예를 들어서, 깃허브에는 거의 모든 메뉴에서 비슷하게 나타나는 상단의 nav bar가 있다.
그리고 레포지토리에서 소스 파일에 들어갔을 때의 사이드메뉴 바, 환경설정 창의 사이드 메뉴 바가 있다.
이 요소들을 레이아웃으로 설정하려면 어떻게 해야 할까.

src/routes/
 │ setting/
 │ ├ account/
 │ ├ profile/
 │ └ +layout.svelte # setting layout
 │ code/
 │ ├ BE/
 │ ├ FE/
 │ └ +layout.svelte # code(source) layout
 └ +layout.svelte # nav bar layout

우선, 간단히 상단 nav 바는 루트 레이아웃에 두고, source 폴더 아래와 settings 폴더 아래 각각 lalyout파일을 만들 수 있을 것 같다. (source 폴더는 src프로젝트와 구분을 위해 code로 작성)
그렇게 했을 때, 라우팅의 경로가 /setting/account, /setting/profile, /setting/accessibility 등으로 길어진다. 지금처럼 routing 경로를 기능 별로 분리하는 것이 불필요할 때 사용할 수 있는 것이 grouping이다. 괄호 안에 그룹 이름을 넣은 폴더를 만들고, 각각 그룹으로 만들고 싶은 하위 폴더나 파일을 생성하면 된다.

src/routes/
 │ (setting)/
 │ ├ account/
 │ ├ profile/
 │ └ +layout.svelte
 │ (code)/
 │ ├ BE/
 │ ├ FE/
 │ └ +layout.svelte
 └ +layout.svelte

(setting), (code) 폴더는 routing 경로에 포함되지 않고 단순히 그룹으로 묶어주는 용도로 작동한다.
위의 폴더구조로는 /account, /profile의 url로 아까와 같은 레이아웃을 적용할 수 있다.

일부 레이아웃만 사용하고 싶지 않을 때(@)

(breaking out of layouts)

src/routes/
├ (app)/
│ ├ item/
│ │ ├ [id]/
│ │ │ ├ embed/
│ │ │ │ └ +page.svelte
│ │ │ └ +layout.svelte
│ │ └ +layout.svelte
│ └ +layout.svelte
└ +layout.svelte

+page.svelte 파일에 @ 기호를 사용하여 일부 레이아웃을 사용하지 않을 수 있다.
+page 뒤에 @ + 상속받을 디렉토리명을 붙여줌으로써, 특정 경로의 레이아웃을 상속받지 않을 수 있다.

기본적으로 /item/[id]/embed의 페이지는 파일 구조에 존재하는 layout을 모두 포함한다.

+page@이용법과 적용 범위

• +page@[id].svelte - src/routes/(app)/item/[id]/+layout.svelte을 상속받음
  • 적용되는 레이아웃
    • root, (app), item [id]
  • 적용되지 않는 레이아웃
    • embed
• +page@item.svelte - src/routes/(app)/item/+layout.svelte을 상속받음
  • 적용되는 레이아웃
    • root, (app), item
  • 적용되지 않는 레이아웃
    • [id], embed layout not applied
• +page@(app).svelte - src/routes/(app)/+layout.svelte을 상속받음
  • 적용되는 레이아웃
    • root, (app)
  • 적용되지 않는 레이아웃
    • item, [id], embed
• +page@.svelte - src/routes/+layout.svelte을 상속받음
  • root layout 하나만 적용됨

참고 문서

• 스벨트킷 공식 문서
  https://kit.svelte.dev/docs/advanced-routing#advanced-layouts