[ Vue.js 3 공식 문서 ] 2. Essentials - Event Handling (v-on)

 

[ Reference ] 

https://vuejs.org/guide/essentials/event-handling.html

Event Handling | Vue.js

---

1. Listening to Events

  이벤트를 실행하기 위해서 ** v-on ** 이라는 디렉티브를 사용할 수 있다. ** v-bind ** 를 ** : ** 로 축약할 수 있듯이 ** v-on ** 은 축약형으로 ** @ ** 을 사용할 수 있다. 

 

 이벤트 핸들러를 사용하는데는 두 가지의 방법이 있다. 첫 번째는 Inline, 두 번째는 Method 다. 

 

---

2. Inline Handlers

  Inline handler 는 굉장히 간단하고 전형적인 방식이다. 

const count = ref(0)

<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>

 

 (* ** @click ** 은 ** v-on: click ** 과 동일한 내용이며, click 이벤트를 담당한다. 위의 코드를 해석하면 버튼이 클릭될 때마다 count 가 1씩 늘어나고, count 는 ref 로 반응성이 있기에 결론적으로<p> 태그에서 렌더링되는 숫자가 달라질 것이다.

 

  만약에 인라인에서 event 객체를 넘기고 싶다고 한다면 인자에 ** $event ** 를 넣어주면 된다.  

---

3. Method Handlers

  Inline 방식으로는 복잡한 로직을 처리할 수 없다. 그래서 ** v-on ** 이 메소드의 이름이나 경로를 호출하는 방식으로 사용할 수 있다. 

 

const name = ref('Vue.js')

function greet(event) {
  alert(`Hello ${name.value}!`)
  if (event) {
    alert(event.target.tagName)
  }
}

<button @click="greet">Greet</button>

 

  Method 에는 실행된 DOM 이벤트 객체가 자동으로 들어가게 된다. (* 인자 값으로 event 를 받고 event.target 을 통해서 DOM Element 를 조회할 수 있다) 

 

  템플릿 컴파일러는 v-on 값 문자열이 유효한 자바스크립트 식별자 경로에 접근 가능한 속성인지를 확인해서 Inline 으로 처리할 것인지 Method 로 처리할 것인지를 판단한다. 예를 들어서 foo, foo.bar, foo["bar"] 는 식별자가 분명하고 경로 접근이 가능하기 때문에 Method 로 처리하지만, foo( ), count++ 는 Inline 으로 처리한다.

---

4. Event Modifier

  ** event.preventDefault( ) ** 나 ** event.stopPropagation( ) ** 등은 이벤트 핸들러에서 종종 필요로 한다. Vue 에서는 이런 것들을 쉽게 다루기 위해서 Modifier 라는명칭으로 닷 노테이션(dot notation) 을 이용해 사용할 수 있도록 한다. 

 

1. ** .prevent **
   event.preventDefault( ) 를 사용하기 위해서 만든 Modifer
   개발자가 직접 작성한 이벤트 핸들러가 아닌 기존에 존재하는 이벤트 핸들러를 발생시키지 않기 위해 사용한다. 예를 들면, <a> 태그의 href 기능
   
   
2. ** .stop **
   이벤트 버블링을 막기 위해 사용하는 Modifer
   자식의 이벤트를 발생시키려고 하니 그 자식을 포함하는 부모의 이벤트도 발생하는 문제를 막기 위함이다.
   즉, 자식을 클릭했을 때 자식에게 할당된 이벤트만 발생시키고 그 자식을 포함하는 이벤트는 실행시키지 않기 위해 사용한다. (UI 상, 부모가 자식을 포함하고 있는 경우 자식을 클릭해도 부모도 클릭된 것으로 받아들이기 때문에 이런 일이 발생한다)
   바닐라에는 ** .stopPropagation ( ) ** 가 존재하는데 그것을 vue 에서는 간단하게 Modifier 로 ** .stop ** 으로 사용할 수 있다.
   
   
3. ** .capture **
   이벤트 캡쳐링을 막기 위해 사용하는 Modifer
   이벤트 캡쳐링은 부모와 자식의 이벤트가 같이 동작하는 것은 맞지만 자식이 아닌 부모의 이벤트가 먼저 발생하도록 만드는 것을 의미한다 (UI 상, 부모가 자식을 포함하고 있는 경우, 자식을 클릭하면 자식의 이벤트가 먼저 발생하고 이후에 부모의 이벤트가 발생한다)
   이 이벤트를 사용하려면 부모 컴포넌트에 넣어줘야 한다.
   
   
4. ** .self **
   자식 컴포넌트를 제외한 부모 컴포넌트의 영역에서만 이벤트가 발생시키도록 하는 Modifer
   즉, UI 상 부모가 자식을 포함하고 있다 하더라도 자식 영역을 클릭한다 해도 부모에게 할당된 이벤트가 발생하지 않도록 막는 것이다. ** .stop ** 이 자식의 영역을 고유하게 만드는 것이라면 ** .self ** 는 부모의 영역을 고유하게 만드는 것이라 생각하면 편하다
   이 이벤트를 사용하려면 부모 컴포넌트에 넣어줘야 한다. 
   
   
5. ** .once **
   말 그대로 이벤트를 딱 한 번만 실행시키려고 사용하는 Modifer
   
   
6. ** .passive **
   기본적인 로직과 화면의 내용을 따로 처리하는 Modifer
   화면을 사용하는 사용자는 로직과 상관없이 사용할 수 있다
   최대 5배의 효율을 낼 수 있게 만들어 준다.
   데스크탑에서는 잘 사용하지 않고 모바일 "터치" 이벤트에 종종 사용한다.

---

5. Key Modifier

  @keyup, @keydown 등 키보드 자판 키와 연관 있는 Modifier 들을 의미한다. Modifier 로 사용되는 것들은 보통 특수 키들 (Enter, ESC) 등과 같은 것이며 Modifeir 자체가 그 키들의 이름으로 구성돼 있기 때문에 직관적이고 사용하기 편하다. 

 

1. enter
2. tab
3. delete (Delete 키와 Backspace 키 둘 다 포함)
4. esc
5. space
6. up, down, left, right
7. ctrl
8. alt
9. shift
10. meta
      

---

  Modifier 들은 한 개만 사용할 수 있는 것이 아니라 체이닝으로 동시에 여러 개를 사용할 수 있다. 이런 기능은 보통 Key Modifer 에서 자주 사용할 수 있는데, 이럴 때 ** .exact ** Modifer 를 함께 사용해주면 이벤트를 발생시키는데 필요한 Modifier 의 정확한 조합을 제어할 수 있게 해준다.