[ Vue.js ] 뷰 라우터

식빵·2023년 2월 5일

spa vue vue.js

Vue.js

목록 보기

3/4

🍀 라우터

1. Router? Routing?

뷰 라우터(Vue Router)를 통해서 Vue 애플리케이션에서 Routing 이 가능하다.
즉 Router 는 Routing 을 행하는 주체(ex: 라이브러리, 프레임워크, etc...)이다.

그런데 정작 라우팅(Routing)은 어떤 행위를 의미하는 걸까?

Routing 은 server-side applications 에서 오랜 시간동안 사용되던 용어이며,
주로 사용자의 HTTP 요청과 이를 핸들링하는 코드를 연결하는 것을 의미했다.

이러한 서버단의 라우팅 덕분에 www.naver.com 라고 브라우저 주소창에 치면,
해당 페이지 요청을 처리하는 서버단의 핸들링 코드가 동작하여 html 을 반환받고,
이를 브라우저 화면에서 볼 수 있었던 것이다.

참고 : Spring MVC 를 사용하는 개발자면 아래와 같은 방식으로 라우팅을 했을 것이다.
(물론 상세한 라우팅은 프레임워크가 다 해줬겠지만... 아무튼 간접적으로나마 했다.)

하지만 오늘 날 웹 개발에서는 server-side applications 뿐만 아니라
사용자의 화면을 책임지는 SPA 단에서도 사용된다.

그렇다면 SPA 의 라우팅은 무엇과 무엇을 매핑하는 걸까?
그건 바로 URL 상태와 웹 페이지에 보여줄 화면을 매핑하는 것이다.
여기서 말하는 URL 상태란 것은 URL 문구 그 자체를 의미한다.

2. HistoryAPI 로 URL 변경

URL 의 상태를 변경은 브라우저 Built-In API 인 HistoryAPI 를 이용한다.
주의할 점은 URL 상태에 변화를 준다는 것이 서버에 URL 요청을 보낸다는 의미가 아니다.
단순히 URL 의 (도메인 이후 영역에) 문구를 더 추가하거나, 제거하는 정도이다.

이해가 좀 안되면 아래처럼 간단하게 테스트해서 확인해보자.

브라우저에서 새탭을 열고 https://naver.com 에 접속한다.
개발자 도구 콘솔창을 열고 아래처럼 순서대로 입력해본다.
이때 URL 가 변하지만, 실제 URL 요청이 일어나지 않는 것을 눈여겨 보자.
- history.pushState('','','login');
- history.pushState('','','user');
- history.pushState('','','blog');

👉 테스트 모습

보면 알겠지만 URL 요청이 일어나지 않아서 화면이 깜빡이지 않는다.
그냥 계속 기존 화면을 그대로 보여준다.

여기서 한 가지 더 봐야할 게 있다.
history.pushState('','','blog'); 까지 입력한 상태에서
브라우저의 뒤로가기 버튼에 오른쪽 마우스를 클릭하면 아래와 같이 우리가
pushState 을 호출한 횟수만큼 history 가 stack 처럼 쌓인 것을 확인할 수 있다.

한번 클릭해보자.
그러면 우리가 이전에 pushState 로 변경했던 URL 이 다시 세팅되는 것을 볼 수 있다.
이 동작도 실제 URL 요청이 일어나지 않는 것을 다시 한번 확인할 수 있다.

3. SPA Router

SPA Router 라이브러리는 앞서 본 HistoryAPI 를 이용해 url 을 변경하고,
해당 url 과 매핑된 component 를 화면에 뿌려준다.

참고로 SPA Router 라이브러리 내에는 historyAPI 의 동작에 대한
Event Listener 등록이 된 상태여서 이런 동작이 가능한 것이다.

참고글: How to get notified about changes of the history via history.pushState?

결론은 SPA ROUTER 는 URL 과 브라우저 화면(= component)을 매핑한다는 의미다.

🍀 뷰 라우터

서론이 참 길었다. 이제 Vue 에서 공식적으로 제공하는 Vue Router 사용해보자.
일단 기본 세팅을 아래처럼 하고 브라우저로 열어서 Router 가 적용됐는지 먼저 확인해보자.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
  <title>Router</title>
</head>
<body>
<div id="app6"></div>
<script>
  // 라우터 생성
  let router = new VueRouter({
  
  });
  
  // Vue 인스턴스 생성
  new Vue({
    el: '#app6',
    router: router // 라우터 등록!
  })
</script>
</body>
</html>

Vue 개발자 도구에서 보면 Router 가 Vue 인스턴스에 등록된 것을 확인할 수 있다.

본격적으로 Vue Router 를 사용하는 html 을 짜보면 아래와 같다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <!-- 주의! 라이브러리 import 는 vue, vue-router 순으로 작성해야 합니다  -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
  <title>Router</title>
</head>
<body>
<div id="app6">
  <div>
    <!-- 최종적으로 a 태그로 바뀜 -->
    <router-link to="/welcome">Login</router-link>
    <router-link to="/main">Main</router-link>
  </div>
  <router-view></router-view>
</div>
<script>
  
  // 라우터에 매핑될 화면, 즉 컴포넌트를 생성한다.
  let WelcomePage = {
    template: '<div>welcome 🎉</div>'
  };

  let MainSection = {
    template: '<div>blablabla...💬</div>'
  };

  // 라우터를 생성한다. url 과 컴포넌트를 매핑하는 내용이 주다.
  let router = new VueRouter({
  	mode: 'history', // # 이 붙지 않고 
    // 페이지의 라우팅 정보
    routes: [
      {
        path: '/welcome',	// 매핑할 URL
        component: WelcomePage // 매핑할 URL 과 
      },
      {
        path: '/main',
        component: MainSection
      }
      //... 페이지의 갯수만큼 객체가 늘어난다.
    ]
  });
  
  // Vue 인스턴스 생성
  new Vue({
    el: '#app6',
    router: router // 라우터 등록!
  });
</script>
</body>
</html>

new VueRouter({}) 를 통해서 url 정보와 화면(= component)를 매핑한다.
생성한 VueRouter 를 Vue Instance 의 router 로 등록한다.

vue-router.js 가 제공하는 Global Component 인 <router-link> 사용
- VueRouter 로 매핑했던 url 을 to 라는 속성의 값으로 준다.
- <router-link> 는 최종적으로 <a> 태그로 변환된다.

vue-router.js 의 또 다른 Global Component 인 <router-view> 사용
- <router-link> 와 연계돼서 동작한다.
- <router-link> 의 to 속성의 url 과 매핑했던 컴포넌트를 화면에 보인다.