Skip to content

Vue:render

뷰JS의 간단한 라우팅

단일 페이지 어플리케이션(SPA)에서 가장 먼저 처리해야 할 것이 바로 라우팅이다. 서버에서 라우팅은 URI에 따라 해당하는 정적파일을 내려주는 방식이다. 이를 브라우져에서 구현해야 하는것이 SPA 개발의 핵심이다.

아이디어는 간단하다. 요청 URI에 따라 브라우져에서 돔을 변경하는 방식이다. Vue.js 공식 문서의 Scaling Up 섹션에 구현된 코드가 있다.

라우팅 별로 세 개의 컴포넌트를 만든다. 

const Home = { template: "<p>home page</p>" }
const About = { template: "<p>about page</p>" }
const NotFound = { template: "<p>Page not found</p>" }

경로에 따라 위 세개 컴포넌트를 바꿔가면서 렌더링 해주려고 한다. 그럼 경로와 컴포넌트 딕셔너리가 필요하겠다. 

const routes = {
  "/": Home,
  "/about": About,
}

루트('/') 경로와 어바웃('/about') 경로에 대한 각각의 컴포넌트 딕셔너리를 만들었다.

뷰 인스턴스 설정 객체에는 el, data 뿐만아니라 render 속성도 있다. 사실 함수다. createElement같은 돔 생성 함수를 인자로 주입 받는 함수가 render 함수이다. 함수 h()에 컴포넌트 설정 객체를 넘겨주면 뷰JS는 컴포넌트를 화면에 그린다. (컴포넌트를 마운팅 포인트에 갖다 붙인다.)

요청 경로에 따라 render() 함수가 동적으로 동작하도록 만들면 라우팅에 따라 다른 화면을 구현할 수 있는 셈이다. 

new Vue({
  /* 생략 */

  render(h) {
    return h(this.ViewComponent)
  },
})

render() 함수는 ViewComponent라는 계산된 속성을 인자로 전달해서 h() 함수를 호출한다. 

new Vue({
  /* 생략 */

  computed: {
    ViewComponent() {
      return routes[window.location.pathname] || NotFound
    },
  },

  /* 생략 */
})

ViewComponent는 현재 경로로 routes 디셔너리에서 컴포넌트를 찾아 반환한다. 정의되지 않은 경로일 경우 NotFound 컴포넌트를 반환한다.

전체 코드는 다음과 같다: 

const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const About = { template: '<p>about page</p>' }

const routes = {
  '/': Home,
  '/about': About
}

new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute] || NotFound
    }
  },
  render (h) { return h(this.ViewComponent) }
})

See also