라우터

라우팅이란?

라우터(Router)를 이해하기 위해서는 먼저 라우팅(Routing)이 무엇인지 알아야합니다. 라우팅이란 웹 페이지 간의 이동 방법을 말합니다. 라우팅은 현대 웹 앱 형태중 하나인 싱글 페이지 애플리케이션에서 주로 사용하고 있습니다.

​

라우팅을 이용하면 화면 간의 전환이 매끄러울 뿐만 아니라 애플리케이션의 사용자 경험을 향상 시킬 수 있습니다. 일반적으로 브라우저에서 웹 페이지를 요청하면 서버에서 응답을 받아 웹 페이지를 다시 사용자에세 돌려주는 시간 동안 화면 상에 깜빡거림 현상이 나타납니다. 이런 부분들을 라우팅으로 처리하면 깜빡거림 없이 화면을 매끄럽게 전환할 수 있을 뿐만 아니라 더 빠르게 화면을 조작할 수 있어 사용자 경험이 향상 됩니다.

​

뷰 라우터

뷰 라우터는 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리입니다. 뷰 라우터를 이용하여 뷰로 만든 페이지 간에 자유롭게 이동할 수 있습니다. 뷰 라우터를 구현할 때 필요한 특수 태그와 기능은 다음과 같습니다.

태그	설명
<router-link to="URL 값">	페이지 이동 태그. 화면에서는 <a>로 표시되며 클릭하면 to에 지정한 URL로 이동합니다.
<router-view>	페이지 표시 태그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역입니다.

그럼 뷰 라우터를 이용하여 어떻게 페이지를 이동하는지 직접 코드를 보고 확인하겠습니다.

1. 각 <router-link>는 화면 상에서 [Main 컴포넌트로 이동], [Login 컴포넌트로 이동]이라는 <a> 버튼 태그로 변환되어 표시됩니다. 각 버튼을 클릭하면 to=""에 정의된 텍스트 값이 브라우저 URL 끝에 추가됩니다. 여기서는 /main과/login의 2개의 URL이 끝에 추가됩니다.
2. <router-view>는 갱신된 URL에 해당하는 화면을 보여주는 영역입니다. <router-view>에 나타낼 화면은 <script>에서 정의합니다.
3. Main과 Login 컴포넌트에는 template 속성으로 각 컴포넌트를 구분할 수 있는 정도의 간단한 HTML 코드를 정의합니다.
4. routes 변수에는 URL값이 /main일 때 Main 컴포넌트를, /login일 때 Login 컴포넌트를 표시하도록 정의합니다.
5. router 변수에는 뷰 라우터를 하나 생성하고, routes를 삽입해 URL에 따라 화면이 전환될 수 있게 정의합니다.
6. 마지막 부분은 새 인스턴스 생성하고 라우터의 정보가 담긴 router를 추가하는 코드입니다

​

스크립트 코드에는 현재 크게 Main, Login 컴포넌트를 정의하는 부분, URL 값에 따라 표시될 컴포넌트를 지정하는 routes 부분, 뷰 라우터에 routes를 연결하는 부분, 마지막으로 뷰 인스턴스를 생성하여 라우터를 삽입하는 부분이 있습니다.

​

뷰 라우터 실행 결과 화면

위 그림에서 'Main 컴포넌트로 이동'을 클릭하면 깜박거림 현상 없이 URL의 끝이 'main'으로 바뀌면서 아래와 같은 화면이 나타납니다.

아래 사진부턴 위에 링크를 잘 보시면 됩니다.

Main 컴포넌트로 이동한 화면

마찬가지로 'Login 컴포넌트로 이동'을 클릭하면 URL의 끝이 'login'으로 바뀌면서 아래와 같은 화면이 나타납니다.

Login 컴포넌트로 이동한 화면

기본 라우터를 간단하게 코드랑 실행 화면을 살펴보았습니다.

지금 이 예제는 컴포넌트 1개만 표기하면 때문에 어렵지 않습니다. 하지만 실제 웹 앱을 구현할 때는 화면이 여러 개의 컴포넌트로 분할된 경우가 많습니다.