Router (라우터)

#vue #vue기초

React나 Vue같은 SPA 특화된 라이브러리를 사용하는 큰 이유중 하나인 Router입니다.
일반 사이트에서는 페이지 이동시 새로고침이 일어나 화면이 깜박거리지만 Router 기능을 이용하면
화면의 깜박거리면서의 전환이나 빠른 이동으로 사용자 경험이 향상됩니다.
간단한 뷰의 Router 예제를 보겠습니다.

Router 예제

<html>
    <head>
        <title>뷰 Router</title>
    </head>
    <body>
        <div id="app">
            <h1>뷰 Router</h1>
            <p>
                <router-link to="/main">Main 컴포넌트로 이동</router-link>
                <router-link to="/login">Login 컴포넌트로 이동</router-link>
            </p>
            <router-view></router-view>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.15/dist/vue.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
        <script>
            /* 템플릿 정의 */
            var Main = { template : '<div>Main</div>' };
            var Login = { template : '<div>Login</div>' };

            /* url과 컴포넌트 매칭 */
            var routes = [
                { path : '/main', component : Main },
                { path : '/login', component : Login },
            ]

            /* 라우터 정의 */
            var router = new VueRoutter({

                routes
            });

            /* 인스턴스 정의 */
            var app = new Vue({
                router
            }).$mount('#app');
        </script>
    </body>
</html>

html의 app요소 안에는 크게 두가지로 나누어 집니다.

  • router-link – 컴포넌트를 호출할 수 있는 버튼 태그들.
  • rounter-view – 호출한 컴포넌트가 표시되는 영역.

크게 어려운 부분은 없습니다.
추가로 스크립트 호출시에 vue 코어 뿐만이 아닌, vue-router의 호출도 필요합니다.

Vue의 스크립트 구문에서는 Component 정의, url과 Component 매칭, Vue Router 정의, Instance에 Router 추가 부분으로 되어 있습니다.
템플릿 정의에서는 router-view 영역에 나타날 Component 템플릿을 정의 해줍니다.
url과 Component 매칭에서는 연결될 url과 Component를 배열로 정의 합니다.
Router 정의에서는 Vue Router에 위에서 선언한 Router를 Vue Router에 정의 합니다.
Component 정의에서는 Component를 생성하고 Router의 정보를 추가합니다.

Component 정의에서 $mount는 우리가 이전에 사용하던 el : ‘#app’ 부분과 같은 역할을 합니다.
Component를 생성할 때 el 속성을 넣지 않았더라도 $mount를 이용하면 강제로 Instance를 화면에 붙일 수 있습니다.
Vue 공식 문서에서는 라우터 지정시에는 $mount()를 이용하도록 안내하고 있습니다.
(물론 el : #app 형태로 제대로 작동합니다)

위 예제에서는 1개의 Component만 표시되게 때문에 크게 어려운점은 없습니다.
앞으로 다중 Component에서는 어떻게 Router가 구동되는지 알아보겠습니다.