본문 바로가기

Study/NextJS 공식문서

[2주 차] Route Group

앱 디렉토리에서 중첩된 폴더는 일반적으로 URL 경로에 매핑된다. 그러나 폴더를 Route Group으로 표시하여 폴더가 라우트의 URL 경로에 포함되지 않도록 할 수 있다. 이렇게 하면 URL 경로 구조에 영향을 주지 않고 Route Segment와 프로젝트 파일을 논리적 그룹으로 구성할 수 있다. 폴더 이름을 소괄호로 묶어 Route Group을 만들 수 있다.

 

레이아웃

계층 구조는 같지만 서로 다른 목적의 경로 그룹이 있을 때, 각 그룹 내에 layout.tsx 파일을 추가하면 서로 다른 레이아웃을 설정할 수 있다. 이를 통해 동일한 URL 구조를 가지면서도 각 경로 그룹에 맞는 레이아웃을 효율적으로 적용할 수 있다.

 

여러 루트 레이아웃 만들기

여러 루트 레이아웃을 만들려면 최상위 layout.js 파일을 제거하고, 각 경로 그룹 안에 layout.js 파일을 추가해야 한다. 이렇게 하면 애플리케이션을 완전히 다른 UI와 경험을 가진 독립적인 섹션으로 분리할 수 있다. 각 루트 레이아웃에는 <html> 과 <body> 태그를 포함해야 한다.

 

'Study > NextJS 공식문서' 카테고리의 다른 글

[3주 차] Dynamic Routes  (0) 2025.01.19
[3주 차] Project Organization  (0) 2025.01.19
[2주 차] Redirecting  (0) 2025.01.11
[2주 차] Error Handling  (0) 2025.01.11
[2주 차] Loading UI and Streaming  (0) 2025.01.11