Vue Template(뷰 템플릿) - 2

이벤트 처리

뷰는 이벤트 처리를 위해 v-on 디렉티브와 methods속성을 활용한다.

...
<button v-on:click="clickBtn>클릭</button>
...
<script>
	methods: {
    	clickBtn: function(){
        	alert('clicked');
        }
    }
</script>

그리고 v-on디렉티브로 메서드를 호출할 때 인자값을 넘기는 방법도 있다.

...
<button v-onLclick="clickBtn(10)">클릭</button>
...
<script>
	methods: {
    	clickBtn: function(num){
        	alert('clicked ' + num + ' times');
        }
    }
</script>

마지막으로 event인자를 이용해 화면 요소의 돔 이벤트에 접근해 봅시다.

<button v-on:click="clickBtn">클릭</button>

<script>
	methods: {
    	clickBtn: function(event){
        	console.log(event);
        }
    }
</script>

 

고급 템플릿 기법

실제 애플리케이션을 개발할 때 유용한 속성으로 앞에서 배운 데이터 바인딩, 디렉티브와 같은 기본 문법과 함께 사용된다.

 

computed 속성

데이터를 가공하는 등의 복잡한 연산은 뷰 인스턴스 안에서 하고 최종적으로는 HTML에는 데이터를 표현만 해야 한다고 설명하였다. computed속성은 이러한 데이터 연산들을 정의하는 영역이다.

...
<div id="app">
	<p>{{ reversedMessage }}</p>
</div>
...
<script>
	new Vue({
    	el: '#app',
        data: {
        	message: 'Hello Vue.js!'
        },
        computed: {
        	reversedMessage: function(){
            	return this.message.split('').reverse().join('');
            }
        }
    });
</script>

computed속성의 첫 번째 장점은 data속성값의 변화에 따라 자동으로 다시 연산한다는 점이다.

예를 들어 computed속성에서 사용하고 있는 data속성값이 변경되면 전체 값을 다시 한번 계산한다.

두 번째 장점은 캐싱이다. 캐싱은 동일한 연산을 반복해서 하지 않기 위해 연산의 결과 값을 미리 저장하고 있다가 필요할 때 불러오는 동작이다. 위 코드에서는 reversedMessage 값을 한 번만 표현했지만 만약에 화면의 여러 곳에 표시해야 한다면 computed속성의 reversedMessage()가 미리 연산한 결과를 가지고 있다가 화면에 결과만 표시한다.

 

computed 속성과 methods 속성의 차이점

일단 methods속성과 computed속성의 가장 큰 차이점은 methods속성은 호출할 때만 해당 로직이 수행되고, computed속성은 대상 데이터의 값이 변경되면 자동적으로 수행된다는 점이다. 다시 말해서 수동적으로 데이터를 갱신하느냐, 능동적으로 데이터를 갱신하느냐의 차이점이 있다.

<div id="app>
	<p>{{ message }}</p>
    <button v-on:click="reverseMsg">문자열 역순</button>
</div>

<script>
	new Vue({
    	el: '#app',
        data: {
        	message: 'Hello Vue.js!'
        },
        methods: {
        	reverseMsg: function(){
            	this.message.split('').reverse().join('');
                return this.message;
            }
        }
    })
</script>

캐싱 면에서 두 속성을 보면 methods속성은 수행할 때마다 연산을 하기 때문에 별도로 캐싱하지 않지만, computed속성은 데이터가 변경되지 않는 한 이전의 계산값을 가지고 있다가(캐싱하고 있다가) 필요할 때 바로 반환해 준다.

따라서 복잡한 연산을 반복 수행하여 화면에 나타내야 한다면 computed속성을 이용하는 것이 methods속성을 사용하는 것보다 성능 면에서 효율적이다.

 

watch 속성

데이터 변화를 감지하여 자동으로 특정 로직을 수행한다, computed속성과 유사하지만 computed속성은 내장 API를 활용한 간단한 연산 정도로 적합한 반면, watch 속성은 데이터 호출과 같이 시간이 상대적으로 더 많이 소모되는 비동기 처리에 적합하다.

...
<div id="app>
 <input v-model="message" />
</div>
...

<script>
	new Vue({
    	el: '#app",
        data: {
        	message: 'Hello Vue.js!'
        },
        watch: {
        	message: function(data){
            	console.log("message의 값이 바뀝니다 : ", data);
            }
        }
    });
</script>

위 코드는 간단한 input 박스의 입력값을 v-model 디렉티브로 연결하여 입력값에 변화가 있을 때마다 watch속성에서 변화된 값을 로그로 출력한다.