Route Groups와 Layout 활용

2025.6.29 일요일의 공부기록

Next.js에서는 Route Groups와 Layout 파일을 활용하여 특정 페이지 그룹에만 공통된 UI 컴포넌트를 적용할 수 있다. 이번 글에서는 실제 프로젝트의 예시를 통해 하단 탭바(tab-bar)가 특정 페이지 그룹에서만 나타나도록 구현하는 방법을 자세히 설명한다.

---

Next.js의 Route Groups란?

Next.js의 Route Groups는 URL 경로에 영향을 주지 않고, 폴더를 그룹화하여 공통된 레이아웃, 메타데이터, 또는 UI 요소를 적용할 때 유용한 기능이다.

Route Groups를 사용하려면 폴더 이름을 괄호로 감싸서 (auth), (tabs) 형태로 명명한다. 이는 URL에 반영되지 않고 오직 내부 구조에서만 그룹화 역할을 수행한다.

예시 구조:

app
├── (auth)
│   ├── login
│   ├── create-account
│   ├── sms
│   └── github
│   └── page.tsx
└── (tabs)
    ├── chat
    ├── life
    │   └── page.tsx
    ├── live
    ├── products
    ├── profile
    └── layout.tsx  # 탭바가 포함된 레이아웃

🔗 Next.js Route Groups 공식 문서

---

특정 Route Group에만 하단 탭바 적용하기

위의 구조에서 (tabs) 그룹에는 하단 탭바가 나타나고, (auth) 그룹에는 나타나지 않도록 구현한다.

이를 위해 사용하는 Next.js의 기능이 바로 layout.tsx 이다.

layout.tsx 파일의 역할

layout.tsx는 특정 페이지 또는 페이지 그룹에서 공통적으로 사용하는 UI 요소나 레이아웃 구조를 정의한다. 예를 들어, 네비게이션 바, 푸터, 사이드바 등을 공통으로 넣을 수 있다.

• 특정 Route Group 내에 layout.tsx 파일을 두면, 해당 그룹의 모든 페이지에만 공통적으로 적용된다.
• 다른 Route Group이나 최상위 레벨의 페이지에는 영향을 주지 않는다.

---

실제 예시 구현 코드 (tabs 그룹의 layout.tsx)

다음은 (tabs) 그룹의 페이지에서만 하단 탭바를 렌더링하는 예제 코드이다.

app/(tabs)/layout.tsx

import type { ReactNode } from "react";
import TabBar from "@/components/tab-bar";

export default function TabsLayout({ children }: { children: ReactNode }) {
  return (
    <div className="flex flex-col min-h-screen">
      <div className="flex-grow">{children}</div>
      <TabBar /> {/* 하단 탭바 컴포넌트 */}
    </div>
  );
}

코드 설명:

• 모든 페이지의 컨텐츠는 children에 렌더링된다.
• TabBar 컴포넌트는 모든 자식 페이지 하단에 고정적으로 위치한다.
• 이를 통해 (tabs) 그룹에 포함된 페이지에서는 하단 탭바가 공통적으로 노출된다.

---

다른 그룹에서 탭바 숨기기 (auth 그룹의 예시)

다른 Route Group인 (auth)에는 별도의 layout.tsx를 사용하지 않거나 탭바를 포함하지 않으면 하단 탭바가 나타나지 않는다.

예를 들어 (auth) 그룹에 다음과 같은 간단한 레이아웃을 정의할 수 있다:

app/(auth)/layout.tsx (탭바 없음)

import type { ReactNode } from "react";

export default function AuthLayout({ children }: { children: ReactNode }) {
  return (
    <div className="min-h-screen flex flex-col items-center justify-center">
      {children}
    </div>
  );
}

• 탭바가 없는 단순한 레이아웃이므로 로그인, 회원가입 페이지 등 인증 관련 페이지에는 하단 탭바가 나타나지 않는다.

---

폴더 구조

실제 폴더 구조를 시각화하면 다음과 같다:

app
├── (auth) 🚫 탭바 없음
│   ├── login
│   ├── create-account
│   ├── sms
│   └── github
│   └── page.tsx
│   └── layout.tsx (탭바 없는 단순 레이아웃)
│
└── (tabs) ✅ 하단 탭바 적용
    ├── chat
    ├── life
    │   └── page.tsx
    ├── live
    ├── products
    ├── profile
    └── layout.tsx (탭바가 포함된 레이아웃)