# Vue Router

**Vue Router**는 Vue.js를 위한 공식 라우터 라이브러리입니다. 이 라이브러리는 Vue.js 애플리케이션에 라우팅 기능을 통합하여, 단일 페이지 애플리케이션(SPA, Single Page Application)에서 페이지 간 전환을 매끄럽고 효율적으로 처리할 수 있도록 합니다. Vue Router는 Vue의 핵심 컴포넌트 시스템과 긴밀하게 통합되어 있어, URL에 따라 다른 컴포넌트를 렌더링하고, 네비게이션 가드(Navigation Guards)를 통해 라우팅 흐름을 제어하며, 동적 라우팅과 중첩 라우팅 등 복잡한 네비게이션 구조를 쉽게 구현할 수 있게 해줍니다.

## 개요 및 특징

Vue Router는 Vue.js 생태계에서 표준 라우팅 솔루션으로 자리 잡고 있습니다. 전통적인 웹 애플리케이션이 서버에서 전체 페이지를 새로고침하여 데이터를 전달하는 방식과 달리, Vue Router는 클라이언트 측에서 URL의 변화를 감지하고 해당 URL에 맞는 컴포넌트만 동적으로 로드하여 화면을 업데이트합니다. 이로 인해 사용자는 페이지 로딩 없이도 빠른 전환 경험을 얻을 수 있습니다.

주요 특징은 다음과 같습니다:

*   **모듈화된 아키텍처**: Vue 3의 Composition API와 잘 어울리며, Vue 2의 Options API에서도 안정적으로 작동합니다.
*   **동적 라우팅**: URL 파라미터를 통해 데이터 기반의 경로를 생성할 수 있습니다.
*   **중첩 라우팅**: 복잡한 레이아웃 구조에서 하위 라우트를 쉽게 관리할 수 있습니다.
*   **네비게이션 가드**: 라우팅 전후의 로직(인증 체크, 데이터 로딩 등)을 실행할 수 있습니다.
*   **스크롤 복구**: 브라우저 뒤로가기/앞으로가기 시 스크롤 위치를 자동으로 복원합니다.

## 설치 및 설정

Vue Router를 프로젝트에 설치하려면 npm 또는 yarn과 같은 패키지 매니저를 사용합니다.

```bash
npm install vue-router@4
```

설치가 완료되면, Vue 애플리케이션 인스턴스에 Vue Router를 플러그인으로 등록해야 합니다. Vue 3 기준 주요 설정 과정은 다음과 같습니다.

1.  **라우터 인스턴스 생성**: `createRouter`와 `createWebHistory` (또는 `createWebHashHistory`) 함수를 사용하여 라우터 인스턴스를 만듭니다.
2.  **라우트 정의**: `routes` 배열에 URL 경로와 매핑될 컴포넌트를 정의합니다.
3.  **Vue 앱에 연결**: `app.use(router)` 메서드를 통해 라우터를 Vue 애플리케이션에 적용합니다.

```javascript
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // 코드 스플리팅을 위한 동적 import
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router
```

## 주요 기능详解

### 1. 라우트 링크 및 뷰 렌더링

Vue Router는 템플릿 내에서 `<router-link>` 컴포넌트를 제공합니다. 이는 일반 `<a>` 태그와 유사하지만, 페이지 새로고침 없이 내부 라우팅을 수행합니다. `<router-view>`는 현재 활성화된 라우트에 해당하는 컴포넌트가 렌더링되는 영역입니다.

```html
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view />
  </div>
</template>
```

### 2. 프로그래밍적 네비게이션

컴포넌트 내부에서 자바스크립트 코드를 통해 라우팅을 수행해야 할 경우, `useRouter` 훅을 사용합니다. 이는 폼 제출 후 리다이렉트하거나, 조건부 로직에 따라 페이지를 이동할 때 유용합니다.

```javascript
import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()

    const goToAbout = () => {
      router.push('/about')
    }

    return { goToAbout }
  }
}
```

### 3. 동적 라우팅과 파라미터

URL의 일부가 동적으로 변하는 경우(예: `/user/123`, `/user/456`), 라우트 정의 시 콜론(`:`)을 사용하여 파라미터를 정의할 수 있습니다. 컴포넌트 내부에서는 `useRoute` 훅을 통해 이 파라미터 값에 접근할 수 있습니다.

*   **라우트 정의**: `{ path: '/user/:id', component: User }`
*   **파라미터 접근**: `const route = useRoute(); console.log(route.params.id);`

### 4. 네비게이션 가드 (Navigation Guards)

라우팅이 시작될 때 실행되는 전역 또는 로컬 훅을 사용하여 라우팅 흐름을 제어합니다. 대표적인 용도는 인증된 사용자만 접근 가능한 페이지를 보호하는 것입니다.

*   **전역 가드**: `router.beforeEach((to, from, next) => { ... })`
*   **라우트별 가드**: 컴포넌트 옵션이나 `setup` 함수 내에서 `beforeRouteEnter`, `beforeRouteUpdate` 등을 정의.

## 결론

Vue Router는 Vue.js 기반의 현대적인 웹 애플리케이션을 구축하는 데 필수적인 도구입니다. 단순한 페이지 전환을 넘어, 복잡한 상태 관리와 데이터 로딩을 포함한 정교한 네비게이션 로직을 지원함으로써 개발자가 직관적이고 유지보수 가능한 코드를 작성할 수 있도록 돕습니다. SPA 개발 시 Vue Router의 이해도는 애플리케이션의 성능과 사용자 경험(UX)에 직접적인 영향을 미치므로, 라우팅 구조 설계와 가드 활용에 대한 깊은 이해가 요구됩니다.

## 관련 문서 및 참고 자료

*   [Vue.js 공식 문서 - 라우터](https://router.vuejs.org/ko/)
*   [Vue Router GitHub 저장소](https://github.com/vuejs/router)
*   [단일 페이지 애플리케이션(SPA) 개요](https://ko.wikipedia.org/wiki/%EB%8B%A8%EC%9D%BC_%ED%8E%98%EC%9D%B4%EC%A7%80_%EC%95%A1%ED%8B%80%EC%BC%80%EC%9D%B4%EC%85%98)