vue.js를 사용하여 쉽고 빠른 뷰 제작하기

Vue.js 사용하기

spring boot를 사용하여 새로운 웹서비스를 제작 중 ReponseBody나 model attribute로 넘긴 데이터를 view와 연동시키는 중에 좀 더 편한 방법이 없을까 하고 찾아보다 vue.js를 알게 되었다.

angular와 react도 사용해 본 경험은 있지만 딱히 spa로 제작하는 것도 아니고, 간단하게 몇 개의 element와 필요한 부분에서만 연동하면 될 뿐,

양방향 바인딩이 유지되어야 한다거나 state 히스토리가 필요한 것도 아니었기 때문에 좀 더 작고 가볍게 연동할 수 있고, 사전지식이 조금 덜 필요한 프레임워크는 없을까 하는 고민과 angular와 react를 한동안 사용하지 않았기에 새로운 버전에 대한 두려움도 있었다. 확인은 하지 않았지만 과거의 경험으로 두 프레임워크 모두 메이저 업데이트가 발생하면 익혀야 할 정보의 양이 적지 않았기 때문이다.

몇번의 검색으로 vue.js에 대해 알게 되었고 https://kr.vuejs.org/v2/guide/index.html 에 게시된 가이드를 잠깐 읽는 것으로 이제 시작할 수 있겠다 하는 수준의 정보를 익히는데 걸리는 시간이 아주 짧았고 매우 유용하게 사용하였기에 게시글을 하나 남기기로 했다.

이 글을 읽는 분들도 다른 곳에서 정보를 읽었으리라 생각하고 퍼포먼스나 우수함 등에 대해서는 설명하고 싶지 않다. 사실 그런건 나에게 중요하지 않았다. 그저 빠르게 코딩양과 반복작업을 줄이고 싶다는 생각과 소스를 다시 보게 될 때 오랫동안 고민할 여지를 줄이고 싶었던 것 뿐.

시작하기

https://kr.vuejs.org/v2/guide/index.html 에 있는 짧은 예제로 시작해보자.

<div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">메시지 뒤집기</button> </div>

var app5 = new Vue({ el: '#app-5', data: { message: '안녕하세요! Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } })

아래를 먼저 보도록 하자. 

선언된 Vue 생성자에 넘겨진 객체를 뜯어보면 el, data, methods 세가지로 이루어진 것을 알 수 있다.

el은 Vue와 연동될 element의 id이며, 이 선언을 통해 element 하위에서는 해당 Vue 오브젝트를 통해 핸들링 할 수 있게 된다.

여기에는 data의 양방향 바인딩과 method를 통한 이벤트 처리를 포함하게 된다.

다시 예제를 보면, message라는 data를 넘겨주는데 이 데이터를 innerHtml에 표시하기 위해서 필요한 것은 {{message}}라는 표현이 전부이다.

이 예제를 만약 jquery로 구현한다고 했을때 소스의 길이를 생각해봤을때 얼마나 편리한가.

만약 jquery로 구현한다면, 데이터를 표시하게 위한

$("#app-5>p").html(message);

를 

$(document).ready(function(){

}); 

내부에 덩그러니 던져 놓는 것으로 시작하게 될 것이다.

이 $(document).ready는 jquery가 처음 등장했을 때만 해도 페이지내의 element의 랜더링이 끝나기를 기다린 이후에 할 작업들을 모아놓을 수 있는 아주 훌륭한 방법론이었으나, 지금에서는 그저 거대한 순차 작업의 나열일 뿐이다.  객체지향이라는 이제 와서는 고리타분하게 느껴질 수도 있는 이 Vue의 캡슐화는 나에게 충분히 매력적으로 느껴진다.

methods를 통한 이벤트 바인딩 역시 마찬가지이다

v-on:click="reverseMessage"

를 통해 엘리먼트가 클릭될 경우 실행될 이벤트명을 선언하고 

methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }

methods 내부에 함수를 선언하는 것으로 하나의 컴포넌트로 캡슐화 되는 것만으로도 vue를 사용하는 이유로 충분한 것처럼 느껴질 정도이다.

리스트 랜더링

목록을 표현하기 위한 리스트 랜더링도 마찬가지로 아주 편리한 방법을 제공한다.

<div v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </div>

물론 thymeleaf 같은 template 엔진으로도 충분히 편하게 사용할 수 있으나 thymeleaf는 랜더링 이후의 이벤트 처리, 양방향 데이터 바인딩 등은 지원하지 않는다는 것을 생각해보면 테이블이나 리스트에서도 vue.js를 사용할 이유가 충분하다 하겠다.

폼입력 바인딩

폼 입력 또한 쉬운 방법을 제공한다. 다음의 예제를 살펴보자.

<select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>Selected: {{ selected }}</span>

new Vue({ el: '...', data: { selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } })

이 예제에서 주목할 점은 select의 데이터를 v-bind를 통해 바인딩 시키고, v-model을 통해 모델과 매칭을 한다.

옵션의 데이터를 출력하고 해당 데이터의 value와 일치하는 값이 v-model에 있으면 selected되어 표시되며, 다른 옵션을 선택하면 v-model에 해당하는 value가 바인딩 된다는 것이다.

데이터 접근

바로 앞의 예제에서 데이터 접근에 대해서 살펴보자.

data 내부에 선언된 변수들은  Vue 오브젝트 변수의 프로퍼티로 생성된다.

selected의 값을 만약 내부의 methods를 하나 선언하여 사용한다고 하면, this.selected로 접근할 수 있으며,

만약 이 값을 해당 Vue객체 외부에서 사용해야 할 필요가 있을때는 vue.selected 같은 방식으로 접근할 수 있다.

(java처럼 접근자를 만들지는 않는다)

마침

살펴본 몇가지 예로 vue.js의 매력이 충분히 느껴질 것이다.

더 많은 예제는 https://kr.vuejs.org/v2/guide/index.html 에서 찾을 수 있으며, 더 많은 수많은 예제들을 구글 검색을 통해 찾을 수 있었다.

state 히스토리 관리에 대한 수단이 그다지 편리하게 제공되지 않는다는 것등 몇가지 단점도 존재한다.

하지만 나처럼 간단한 뷰와 데이터 바인딩의 목적에 제한적으로 사용한다면 딱 필요한 수준이라고 하겠다.