Vue 라우터 / SPA / Router 값 전달

SPA (Single Page Application)

일반적인 웹 어플리케이션은 클라이언트가 웹 페이지를 요청하면 서버로부터 html 을 전달 받아 렌더링 엔진을 통해 화면에 보여준다. 한 페이지에 해당하는 페이지 용량이 커지면 요청마다 매번 새로운 페이지를 전달 받기 버겁다.

 

이러한 문제를 해결하는 것이 SPA, Single Page Application 이다. SPA 는 단일 페이지로 구성된 웹 어플리케이션으로 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현한다. 페이지 변경이 일어난다는 것이 최초 로드되었을 때 미리 브라우저에 올라간 템플릿만 교체하는 것이다. 화면 이동 시에 필요한 데이터를 html 로 전달(서버사이드 렌더링) 받지 않고 필요한 데이터만 서버로부터 전달 받아 동적으로 렌더링 한다. 

 

MPA(Multiple Page Application) vs SPA(Single Page Application)

 

대표적인 SPA 프레임워크는 Angular, React, Vue 등이 있다. SPA 는 자바스크립트로 인한 DOM 조작이 빈번하게 일어나 브라우저의 성능을 저하시킨다는 문제점이 있어 가상 DOM(Virtual DOM)을 사용한다. 가상 돔을 사용하면 DOM 트리와 유사한 가상의 객체 트리로 html 정보를 저장하다가 변경이 발생하면 모든 변화를 모아 한 번에 화면을 갱신한다.

 

---

Vue Router 란?

Vue 에서 화면을 전환할 때는 router 를 사용한다. 라우터는 특정 주소와 접근할 페이지 정보를 설정할 수 있다.

특정 주소로 접근할 경우 이에 해당하는 페이지를 보여주도록 설정하는 것을 라우터에서 라우트를 설정한다고 한다.

 

정확하게는 페이지를 '전환' 하는 것이 아닌 페이지 내부 컴포넌트들을 '재배치' 하는 것이다.

url 변경 시 DOM 을 새로 갱신하는 것이 아니라 미리 컴포넌트를 가지고 있다가 변경된 요소 영역만 갱신하여 유연한 페이지 전환이 가능하다.

 

vue 에서는 vue-router 라는 라우팅 라이브러리를 지원한다.

 

- 라우터 설치하기

vue-router를 설치하고 package.json 파일에서 추가된 모듈을 확인할 수 있다.

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

 

npm install vue-router --save

 

- 라우터 속성

속성	하위 속성	속성 값
mode		hash (default)	모든 URL 을 hash(#) 형태로 서비스, URL 이 변경될 때 페이지가 다시 로드되지 않음
		history	페이지를 다시 로드하지 않고 URL 탐색 가능
redirect			다른 경로로 리다이렉트
routes	path		url 경로
	component		해당 url 에 사용할 컴포넌트
	children		중첩 라우팅 배열
	alias		별칭

 

- 라우터 동작 흐름

① 웹 사이트를 열면 public > index.html 파일만 렌더링 됨

② Vue 인스턴스를 생성하면서 ① 의 태그와 인스턴스가 연결되고 render function 에서 App 이라는 컴포넌트가 보여짐

③ src > App.vue 에서 라우터로 페이지를 변경하고 있음

<router-link> 가 <a> 태그로 바뀌어서 실행됨

④ 라우터에 관련된 설정은 router > index.js 에서 지정된 경로에 따라 해당 경로를 보여줌

 

 

Router 기본

- 라우팅 기능을 이용한 페이지 이동 <router-link>

<route-link to="url"> : 페이지 이동 태그, 화면에서는 <a> 태그로 치환

<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>

 

- 라우팅 페이지 표시 <router-view>

<route-view> : 페이지 표시 태그, 변경되는 url에 대한 컴포넌트를 뿌려줌

<router-view></router-view>

 

- 네비게이션 url 이동 방식 비교

선언전 방식	프로그래밍 방식	특징
<router-link:to="...">	router.push(...)	새로운 URL 을 히스토리 스택에 넣어 브라우저의 뒤로가기 버튼을 클릭하면 이전 URL 로 이동
<router-link:to="..." replace>	router.replace(...)	새로운 URL 을 히스토리 스택에 추가하지 않고 현재 URL 을 대체
-	router.go(n)	히스토리 스택에서 n 만큼 앞, 뒤로 이동

 

- 라우터의 기본 경로

'루트 url'/#/'라우터 이름'

기본 경로에 '#' 값을 제외하고 싶으면 mode를 history로 설정

 

- Nested Routers vs Named Views

특정 url 에 지정된 1개의 컴포넌트가 여러 개의 하위 컴포넌트를 갖는 것을 Nested Router, 특정 url 에 여러 개의 컴포넌트를 영역 별로 지정하여 렌더링 하는 것을 Named View 라고 한다.

• Nested: 상위 컴포넌트가 하위 컴포넌트를 포함하는 형식
• Named: 같은 레벨에서 여러 개의 컴포넌트를 한 번에 표시

 

- 라우터로 값 전달하기

라우터로 컴포넌트를 연결하면서 해당 컴포넌트에 동적으로 필요한 파라미터를 연결하는 경우 path 를 통한 값 전달, params 를 통한 값 전달의 두 가지 방법이 있다

 

① path 를 통한 값 전달

// router.push()의 인자로 path를 넘길 때 key=value를 작성
router.push("/login?id=test@naver.com");

// path를 통해 값을 받기 위해 vue 객체의 query 이용
this.$route.query.key

 

② params 를 통한 값 전달

• url 경로에 노출되지 않고 전달할 수 있다.
• 페이지를 새로고침 하거나 리로드할 때 값이 유지되지 않는다.
• path 와 param 은 같이 작동되지 않으므로 name 을 이용한다.

// name과 props:true 추가
routes: [
    {
        name: 'login',
        path: '/login',
        component: Login,
        props: true
    }
]

// path 대신 name을 이용해 어떤 경로로 갈지 결정, params를 이용해 전달한 값을 알려줌
router.push({name:"login", params:{"id":"test@naver.com"}}});

// this.$route.params.key 형태로 데이터를 전달 받음
this.$route.params.id

 

 

참고자료 및 출처 🙇‍♂️

https://www.huskyhoochu.com/what-is-spa/