3. 이벤트 핸들링

이벤트핸들링

이벤트의 이해

이벤트는 UI개발에 있어 중요한 부분을 차지합니다. 대부분의 경우 어플리케이션은 유저의 클릭을하거나 스크롤을 하는 등 이벤트에 반응하면서 시작합니다. 이전방식은 DOM요소에 이벤트리스너를 등록하난 방식이 주로 사용되었습니다. html에 인라인으로 넣을 수 있지만 MVC패턴에서 뷰와 컨트롤러를 분리하고자 했기 때문에 거의 사용되지 않고 좋은 방법이 아니기 때문에 아래 코드에서 첫번째 방법만 사용이 되고 있습니다.

document.querySelector('.myButton').addEventListener('click', function () {
  alert('Clicked!');
});

<button class="myButton" onclick="myHandler()">Click me</button>

document.querySelector('.myButton').onclick = function () {
  alert('Clicked');
};

Vue는 이벤트를 인라인과 같은 방식으로 코드는 작성합니다. 이는 Vue는 MVVM패턴을 활용하고 모든 뷰 핸들러 함수와 표현식은 현재 뷰 처리 하는 ViewModel에 엄격히 바인딩 되기 때문에 유지보수가 편이하다는 이점을 같기 때문에 인라인 형식을 취했다고 설명하고 있습니다. 가장 큰 장점은 좀 더 빠르게 개발이 가능하고 쉽다는 점 입니다.

<button v-on:click="myFunction()">Add 1</button>
<button @click="myFunction()">Add 1</button>

var app = new Vue({
  el: '#app',
  data: {
    name: 'Vue.js'
  },
  methods: {
    myFunction() {
      alert('hello')
    }
  }
})

v-on:<eventName> 과 같이 템플릿에 직접 작성하고 매서드와 연결하는 구조로 가장 많이 사용됩니다. 매서드로 연결하지 않고 직접 로직을 처리할 수 있으나 추후 유지보수를 생각한다면 추천되지 않고 실제로 생산성 측면에서도 부적절 합니다. 참고로 @ 는 v-on:의 축약표현입니다.

이벤트 버블링이나 캡처링을 제어할 수 있는 수식어도 제공하고 있습니다. 이는 vue의 이벤트처리의 가장 큰 장점이라고 생각하며 과거 인라인방식으로 처리하기 어려웠던 부분을 해결했기때문에 매우 편리합니다. 아래 공식문서에서 제공하고 있는 수식어의 예제를 첨부하였는데 사용방법이 직관적이라 별도의 설명이 필요없는 부분입니다.

<!-- 클릭 이벤트 전파가 중단됩니다 -->
<a v-on:click.stop="doThis"></a>

<!-- 제출 이벤트가 페이지를 다시 로드 하지 않습니다 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 수식어는 체이닝 가능합니다 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 단순히 수식어만 사용할 수 있습니다 -->
<form v-on:submit.prevent></form>

<!-- 이벤트 리스너를 추가할 때 캡처모드를 사용합니다 -->
<!-- 즉, 내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 여기서 처리합니다. -->
<div v-on:click.capture="doThis">...</div>


<!-- event.target이 엘리먼트 자체인 경우에만 트리거를 처리합니다 -->
<!-- 자식 엘리먼트에서는 안됩니다 -->
<div v-on:click.self="doThat">...</div>

그외 자주쓰는 키값을 바로 사용할 수 있도록 키 수식어도 제공하고 있으나 실제 잘 사용하지 않기때문에 중요도는 낮지만 경우에 따라 편하게 사용할 수 있습니다. 이는 아래의 코드예제를 보고 필요에 따라 찾아 사용할 수 있습니다.

<input @keyup.page-down="onPageDown">
<input @keyup.enter="submit">
<input @keyup.space="submit">
<input @keyup.tab="submit">