뷰 라우터

라우팅이란?

라우터를 이해하기 위해선 먼저 라우팅이

무엇인지 알아야 한다. 라우팅이란 웹 페이지 간의

이동 방법을 말한다. 라우팅은 현대 웹 앱 형태중 하나로

싱글페이지 애플리케이션(SPA, Single Page Application)

에서 주로 사용한다. 라우티을 이용하면 화면간의 전환이

매끄럽고 애플리케이션의 사용자 경험을 향상 시킬수 있다.

보통 브라우저에서 웹 페이지를 요청하면 서버에서

응답을 받아 웹 페이지를 다시 사용자에게 돌려주는 시간 동안

화면상에 깜빡거림 현상이 나타난다. 이런 부분들을

라우팅으로 처리하면 매끄럽게 전환 할 수 있다.

그리고 더 빠르게 화면을 조작할수 있다.

뷰 뿐만 아니라 리액트와 앵귤러 모두 라우팅을 이용한다.

프런트엔드 프레임워크를 사용하지 않고 일반 HTML파일들로도

라우팅 자바스크립트 라이브러리를 이용해 라우팅 방식의

페이지를 구현할 수 있다.

뷰 라우터는 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는

공식 라이브러리다. 뷰 라우터를 이용하여 뷰로 만든

페이지 간에 자유롭게 이동 가능하다. 뷰라우터를 구현할 때

필요한 특수 태그와 기능은 아래와 같다.

<router-link to="URL 값">

페이지 이동태그. 화면에서는 <a>로 표시되어 클릭하면to에

지정한 URL로 이동한다.

<router-view>

페이지 표시태그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역이다.

이제 뷰라우터를 이용해 페이지가 이동을 어떻게 하는지 확인해보자.

먼저 12,13line에서 화면에 Main컴포넌트로이동,

Login컴포넌트로 이동 이라는 <a>버튼 태그로 변환되어 표시된다.

각 버튼을 누르면 to=" "에 정의된 텍스트값이 브라우저 URL끝에 추가된다.

15line에서는 갱신된 URL에 해당하는 화면을 보여준다.

<router-view>에 보여질 화며은 <script>에서 설정한다.

현재 스크립트단에는 Main, Login컴포넌트를 정의하는 부분과

URL값에 따라 표시될 컴포넌트를 지정하는 routes부분, 뷰 라우터에 routes를

연결하는 부분, 뷰인스턴스를 생성하여 라우터를 삽입하는 부분이 있다.

21,22line에서 Main과 Login컴포넌트에는 template 속성으로 각 컴포넌트를

구분할 수 있는 정도의 간단한 HTML코드를 정의한다.

24~26line에서 routes변수에 URL값이 /main일때 Main컴포넌트를

/login일때 Login컴포넌트를 표시하도록 설정한다.

29,30line 에서 router변수에는 뷰 라우터를 하나 생성하고

routes를 삽입해 URL에 따라 화면이 전환될 수 있게 설정한다.

33~35line에서는 새 인스턴스를 생성하고 라우터의 정보가 담긴

router를 추가한다.

기본 라우터를 간단하게 알아봤다. 위 소스는 한 화면에

컴포넌트 1개만 표시하면 되기 때문에 쉽게 할 수 있었다.

하지만 실제 웹 앱을 구현할 때는 화면이 여러 개의 컴포넌트로

분할된 경우가 많다. 다음 포스팅에서 이를 위한

네스티드 라우터와 네임드 뷰에 대해 알아보자.