[Udemy Vue 완벽가이드 Section2] 22. 이벤트 및 메서드(methods옵션)

<button v-on:click="counter++">Add</button>

현재 HTML코드에서 counter를 업데이트한다. Vue의 제어부분이지만 HTML코드에 속한다. 

하지만 이건 좋은 방법이 아니다. HTML코드에 로직을 너무 많이 넣으면 안된다.

 

HTML코드는 '출력'에 집중해야한다. 

로직은 JavaScript에 있어야 HTML코드가 간결해진다. 이런 접근 방식과 패턴으로 시작하는게 좋다.

 

counter++는 너무 복잡하지는 않아도 JavaScript코드에 들어가야한다.

그렇다면 이 로직을 어떻게 JavaScript 코드에 넣을까?  → 호출할 수 있는 함수로 작성!

 

Add버튼을 클릭할 때 호출할 수 있는 함수와 Reduce버튼을 클릭할 때 호출할 수 있는 함수 필요.

function add(){
 counter = counter + 1;
} //이렇게 작성하면 작동이 안된다. counter는 전역변수가 아니고, data프로퍼티이기 때문. 그래서 여기서 접근x.
//설사 접근가능하다 하더라도, 전역적으로 생성된 add함수는 Vue에서 제어하는 html코드에 사용x.
//Vue가 제어하는 HTML에서 우리가 사용할 수 있는건, only Vue앱에 정의된것!
//그래서 아래 methods 옵션을 사용한다.

const app = Vue.createApp({
 data(){
  return {
   counter: 0,
  }
 },
 methods: {
  add(){
   this.counter = this.counter + 1;
  }
 },
})

 

methods를 이용하지만, 직접 호출하는게 아니라 methods로 이벤트리스너를 연결한 후, 특정 이벤트가 생기면 Vue가 우리 대신 호출하게 한다.

methods를 사용하여 동적으로 '출력'하는게 아니라 (ex: <p>Result: {{ counter() }}), 버튼 클릭시 실행되도록만 하는 것이어서 add함수에는 return이 필요없다. click이벤트의 이벤트 리스너에는 반환값이 필요없기 때문.

 

위 예시에서 v-on:click="counter++"는 v-on:click="add"와 엄밀히 따지면 같은 방식으로 작동하긴 하지만 후자가 더 낫다. 로직이 더 복잡할 경우를 고려하면 HTML이 아닌, JavaScript에 로직을 넣는 것이 적절하다. 

 

<button v-on:click="add()">Add</button> //함수를 호출한 경우
<button v-on:click="add">Add</button> //함수를 호출하지 않고, 함수를 가리킨 경우
//함수를 호출하지 않고 가리키기만 해도 된다. 즉, Vue에 메서드의 이름을 알리고 클릭하면 실행되도록 만든다.
//보통은 호출하지 않고 가리키는 경우가 더 많다. 그게 JS 및 이벤트 리스너 설정방식에 더 가깝기 때문.

 

이렇게 method를 {{ }}나 v-bind에 넣어서 반환값을 출력하기도 하지만, 이벤트 리스너로 이벤트가 발생할 때 실행될 코드로 정의할 수도 있다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.