[Vue.js] Router 라우터의 개념 및 사용법

📌 1. Vue Router 뷰 라우터란?

뷰 라우터는 Vue.js를 이용하여 싱글 페이지 애플리케이션(SPA)을 구현할 때 사용하는 Vue.js의 공식 라우터이다.

라우터란? (Router)

라우터라고 하면 일반적으로 네트워크간에 데이터를 전송하는 장치를 말한다.
뷰에서 말하는 라우터는 쉽게 말해서 URL에 따라 어떤 페이지를 보여줄지 매핑해주는 라이브러리라고 보면 된다.

예를 들자면, ‘/home’ 경로로 요청이 들어왔을때 ‘Home.vue’ 컴포넌트를 화면에 렌더링 해주는 역할을 수행하는 라이브러리이다.

라우트란? (Route)

어떤 URL에 대해 어떤 페이지를 표시해야 하는지에 대한 정보.
위의 예시에서 ‘/home’ → ‘Home.vue’와 같은 맵핑정보를 라우트(Route)라고 한다.

---

📌 2. Vue Router 라우터 설정 및 사용법

라우터를 설정하고 사용해보자.
요구사항은 다음과 같다.

'/' 경로가 입력되면 HomeView.vue 를 렌더링 해 줄 것이고,
'/about' 경로가 입력되면 AboutView.vue를 렌더링 해 줄 것이다.

• ‘/’ → HomeView.vue
• ‘/about’ → AboutView.vue

1) 라우터 설치

먼저 라우터 라이브러리를 사용하려면 설치가 필요하다.

npm install vue-router

2) 라우터 설정

설치된 라이브러리를 사용하기 위한 설정 작업들이다.

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '@/views/HomeView.vue';
import AboutView from '@/views/AboutView.vue';

//라우트(routes) 정의 : URL 요청에 대해 어떤 페이지(컴포넌트)를 보여줄지에 대한 매핑정보를 정의
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
  },
  {
    path: '/about',
    name: 'about',
    component: AboutView,
  },
];
const router = createRouter({
  history: createWebHistory('/'),
  routes,
});

export default router;

3) 설정한 라우터 객체를 Vue 인스턴스에 추가

//main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

app.use(router)를 호출 함으로써 컴포넌트 내부에서 $router, $route 객체에 접근할 수 있다.

4) 라우터 사용

vue화면이 헤더와 본문으로 구성되어 있다고 가정해보자.
그렇다면 새로운 경로 요청을 할때 본문 컴포넌트(ex.TheView.vue)에 렌더링을 해주어야 한다.

<!--TheView.vue-->
<template>
  <main>
    <div>
     <!-- <h2>Hello Vue3</h2> 렌더링 되어야할 위치-->
      <RouterView></RouterView>
    </div>
  </main>
</template>

---

📌 3. Vue 라우터 사용법 예시

위의 2번에서 다룬 라우터 사용법은 경로(ex.menuId..)에 따라서 본문의 화면을 렌더링해주는 것으로 초기에 설정해두고 해당 코드를 많이 다루지 않는다.

실제 업무에서는 이벤트(버튼 클릭 등)에 따른 화면전환 즉, 실제 컴포넌트의 html과 javascript부에서 라우터를 많이 다룬다.

이해에는 역시 실제로 써보는게 최고다.
html과 javascript에서 라우터를 어떻게 사용하는지 예시를 들어보자.

1) HTML 예시 : 네비게이션 기능 만들기

네이버뉴스에서는 위와 같은 네비게이션 바를 제공한다.
연예를 클릭하면, 연예뉴스 페이지로 이동하는 것이다.

이처럼 App.vue의 네비게이션 html부분에서 라우터를 사용할 수 있다.

<!-- src/App.vue -->
<template>
  <nav>
    <Routerlink to="/">Home</Routerlink> <!--to에 경로를 적는다.-->
    <span> | </span>
    <RouterLink to="/about">About</RouterLink>
  </nav>
  <main>
    <RouterView></RouterView>
  </main>
</template>

이제 네비게이션바 부분의 Home을 클릭하면 Home.vue로 이동하고,
About을 클릭하면 About.vue로 이동할 것이다.

- <RouterLink>

Vue Router 에서는 페이지를 이동할 때는 일반 a태그를 사용하는 대신 커스텀 컴포넌트인 <RouterLink>를 사용하여 다른 페이지 링크를 만들어야 한다.

이를 통해 Vue Router는 페이지를 리로딩 하지 않고 URL에 매핑된 페이지를 렌더링 할 수 있다.
=> SPA를 만들 수 있다. (href는 페이지를 리로딩함)

- <RouterView>

<RouterView>는 URL에 매핑된 컴포넌트를 화면에 표시한다.

2) Javascript 예시 : 버튼 클릭으로 화면 이동

업무에서 주로 쓰는 라우터의 사용은 버튼 클릭 등의 특정 이벤트로 화면을 전환시키는 것이다.
자바스크립트에서 이를 어떻게 쓰는지 알아보자.

먼저 위에서 router를 설정할 때 app.use(router)를 호출했다.
이렇게 호출 함으로써 모든 자식 컴포넌트에 router, route 같은 객체를 사용할 수 있다.
그리고 이러한 객체는 페이지 이동 또는 현재 활성 라우트(경로 매핑)정보 에 접근하는 데 사용할 수 있다.

<!-- HomeView.vue -->
<template>
  <h1>Home Page</h1>
  <button @click="goAboutPage">About 페이지로 이동</button>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';

const router = useRouter(); //기능
const route = useRoute(); //정보
console.log('route.name: ', route.name); // home
console.log('route.path: ', route.path); // /
const goAboutPage = () => router.push('/about');
</script>

라우트는 읽기전용의 정보이고, 라우터는 실제 기능이다.
router.push('/about')을 통해 about경로의 컴포넌트를 호출한다.

라우터는 많은 옵션을 가지고 있으며, 아주 다양하게 활용할 수 있다.
vue공식홈페이지에서 속성들을 살펴볼 수 있다.

이 외에도 route에 params 등의 파라미터를 보낼 수 있으며 쿼리나 해시로도 호출할 수 있다.

---

참고문헌

vue공식홈페이지
짐코딩-vue3실전편

---

오늘의 한 줄

나의 계획했던 vue포스팅이 끝났다.
원래는 작년에 라이프사이클로 vue시리즈를 마무리하고, 2023년 회고를 작성하며 새로운 주제를 작성하려 했는데 라우터는 꼭 포스팅하고 싶어서 1월까지 넘어와서 마지막 포스트를 작성했다.
라우터는 실제 업무에서도 정말 많이 쓰이는 라이브러리이기에 원리를 잘 알고, 사용법을 익혀두는 것이 좋다.

프로젝트 오픈시기라 업무가 바빠 포스팅이 조금 더뎌졌지만,
이렇게 19편의 포스트로 vue시리즈를 마무리해본다.

업무를 하다보면 속도를 맞춰야해서 원리나 개념, 자세한 사용법을 알고 지나가기가 어렵다.
넥사크로에서 vue전환 프로젝트를 진행하면서도 그때그때 필요할때마다 검색해 해결하느라 vue에 대해 심도있게 알긴 어려웠다.
검색해서 알게된 지식은 휘발되기 쉽고, 복사 붙여넣기를 주로하게 되는 코드들은 깊게 고민하지 않기 때문이다.

단순히 할 줄 아는 것 말고, 왜 그런지에 대해 답변하고 싶어 굳이 시리즈로 작성한 vue포스트는 'vue를 할 줄 안다.'에서 'vue를 안다.'로 조금은 변화시켜준 것 같다.

그리고 업무중 문법이나 개념을 까먹었을때 내 벨로그에 들어와 내가 포스팅 했던 글을 보러 온다.
이것이 생각보다 큰 도움이 됐다..
내가 쓴 글은 나에게 맞춤 포스팅이 돼주기 때문이다.

이후에는 시간이 생기면 pinia, vite, 플러그인, 커스텀 등 재밌는 주제로 간간이 올려볼 생각이다.
개인 플젝에 vue를 붙였으니 플젝을 하면서 알게된 것들도 간간이 올릴 것이다.

다음 시리즈의 새로운 주제로는 스프링 프로젝트/디자인패턴 포스팅을 시작하려고 한다.
최근에는 해커랭크의 sql을 공부중이라 3월에 pl/sql까지 마무리하고서야 포스팅을 시작할 수 있지 않을까 싶다.
지금 공부하는 sql은 한건한건 포스트 하긴 의미가 없어보여 이후에 하나의 포스트로 올리는게 좋을 것 같다.

블로그에 2023년 회고를 꼭 작성하고 싶었는데 이것도 오픈이 마무리되면 작성할 수 있을 것 같다.
어쩌다보니 2024년 첫 포스팅인데 2024년 개발도 화이팅이다!