1. 개념 요약

• Route Group은 Next.js App Router에서 URL 경로에는 영향을 주지 않으면서 파일 시스템 상의 디렉터리 구조를 논리적으로 묶는 기능이다.
• 디렉터리 이름을 소괄호로 감싸면 해당 폴더 안의 페이지와 레이아웃을 하나의 그룹으로 취급한다. 이 기능을 통해 코드 가독성과 유지보수성을 높일 수 있다.

2. 배경 지식

• Next.js는 파일 기반 라우팅(file-based routing)을 사용하여 디렉터리 구조 그대로 URL 경로를 매핑한다. ⇒ 그러나 때로는 URL 구조와 상관없이 컴포넌트나 레이아웃을 묶어서 관리하고 싶을 때가 있다.
• 기존에는 _app.tsx나 상위 레이아웃을 여러 곳에서 중복 사용하거나, 불필요하게 폴더를 분리해야 했다. ⇒ Route Group은 이러한 불편을 해소하기 위해 도입된 개념이다.

3. 상세 설명

1. 기본 문법

• 소괄호로 감싸인 폴더명((group))이 Route Group이다.
• URL에는 해당 폴더명이 노출되지 않는다.
• 그룹 내 모든 page.tsx, layout.tsx, loading.tsx 등이 하나의 논리 단위로 묶인다.

app/
│
├─ dashboard
│  └─ page.tsx    ← 얘네 둘만 특정 레이아웃 적용하고 싶으면
└─ settings
│  └─ page.tsx    ← 얘네 둘만 특정 레이아웃 적용하고 싶으면
├─ page.tsx       ← 얘는 레이아웃을 적용하지 않고
└─ layout.tsx     ← admin 공통 레이아웃

app/
├─ (admin)/          ← Route Group 시작 (이렇게 묶으면 된다)
│  ├─ layout.tsx     ← admin 공통 레이아웃
│  ├─ dashboard/
│  │  └─ page.tsx
│  └─ settings/
│     └─ page.tsx
├─ page.tsx          ← 일반 홈 페이지

위 구조에서 브라우저 경로 /dashboard 또는 /settings로 접속하면, 실제 URL에는 (admin)이 표시되지 않는다. 해당 폴더 안의 레이아웃이 자동으로 적용된다. ⇒ 즉, Route Group 적용 전에 경로랑 달라진 것은 없다. (경로 상에서만 봤을때 (admin)폴더는 없는 취급하면 됨)