🚦 Vue Router - 라우트 중첩과 Lazy Loading 적용하기

🚦 Vue Router - 라우트 중첩과 Lazy Loading 적용하기

Vue Router 시리즈 > 4️⃣ Vue Router > 라우트 중첩과 Lazy Loading

• 1. 라우트 중첩(Nested Routes)이란?
• 2. 중첩 라우트 구성 방법
• 3. Lazy Loading이란?
• 4. Lazy Loading 적용 예시
• 5. 실전 팁 및 주의사항
• 🔚 다음 글 안내

---

1. 라우트 중첩(Nested Routes)이란?

Vue에서는 하나의 페이지 안에 또 다른 컴포넌트를 중첩해서 보여주는 구조를 지원합니다. 예를 들어, 사용자 상세 페이지 내부에 탭 메뉴(정보, 주문, 활동기록 등)를 넣는 경우가 이에 해당합니다.

// 예: /user/123/info, /user/123/orders

2. 중첩 라우트 구성 방법

자식 라우트는 부모 라우트의 <router-view> 영역 안에 렌더링됩니다.

📁 router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import UserLayout from '@/views/user/UserLayout.vue'

const routes = [
  {
    path: '/user/:id',
    component: UserLayout,
    children: [
      {
        path: 'info', // → /user/:id/info
        component: () => import('@/views/user/UserInfo.vue')
      },
      {
        path: 'orders', // → /user/:id/orders
        component: () => import('@/views/user/UserOrders.vue')
      }
    ]
  }
]

export default createRouter({
  history: createWebHistory(),
  routes
})

📁 UserLayout.vue

<template>
  <div>
    <h2>사용자 페이지</h2>
    <router-view />
  </div>
</template>

3. Lazy Loading이란?

Lazy Loading(지연 로딩)은 컴포넌트를 처음부터 불러오지 않고, 필요할 때 비동기 로딩하는 기법입니다. 초기 로딩 속도 개선에 매우 효과적입니다.

✔️ 기본 컴포넌트 로딩 vs Lazy Loading

항목	일반 로딩  (일반 import)	Lazy Loading (동적 import)
사용 코드	import MyPage from "@/views/MyPage.vue"	() => import("@/views/MyPage.vue")
로딩 시점	앱 시작 시 모든 컴포넌트 포함 (초기 번들에 포함)	필요한 순간에 비동기 로딩 ( 페이지 진입 시 해당 컴포넌트 로딩)
번들 크기	초기 번들에 포함되어 용량 증가	초기에는 없음. 요청 시 분리된 파일로 로딩
성능	초기 로딩 속도 느려짐 가능성	초기 속도 빠름, 진입 시만 로딩

📌 그럼 왜 항상 비동기 로딩되는 것처럼 느껴질까?

Vue는 SPA(Single Page Application)이기 때문에 페이지 전환이 빠르지만, Lazy Loading을 하지 않으면 사실상 모든 컴포넌트가 미리 JS 번들에 포함됩니다.
→ 즉, 실제로는 **"비동기처럼 보이지만 모든 JS가 이미 로드된 상태"**인 거죠.

📎 결론

• Lazy Loading을 하면: 사용자가 특정 페이지에 진입할 때 그 컴포넌트가 비로소 fetch됨 (= 네트워크 요청)
• Lazy Loading을 안 하면: 애플리케이션이 시작될 때 모든 컴포넌트가 하나의 큰 JS 파일로 번들됨 → 초기 로딩에 부담

 

4. Lazy Loading 적용 예시

{
  path: '/about',
  component: () => import('@/views/About.vue') // Lazy loading 적용
}

webpackChunkName 주석을 활용하면 파일명을 제어할 수 있습니다.

component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')

5. 실전 팁 및 주의사항

• 중첩 라우트의 기본 경로는 '/'가 아니라 상대경로로 작성해야 합니다. (예: path: 'info')
• <router-view>는 반드시 중첩 컴포넌트를 렌더링할 위치에 있어야 합니다.
• Lazy Loading은 defineAsyncComponent를 이용해 수동으로 구성할 수도 있습니다.
• 중첩 라우트가 깊어질 경우, meta 속성 활용으로 라우트 정보 구분하기 추천

🔚 다음 글 안내

이제 Vue Router의 기초부터 중첩 구성, Lazy Loading까지 모두 익혔습니다.
다음 글에서는 상태 관리 도구인 Vuex와 Pinia에 대해 알아봅니다.

👉 다음 글: 상태 관리가 필요한 이유와 Vuex 구조