💻 VueJS 이벤트 핸들링

이번 챕터는 Vuejs의 이벤트 핸들링에 대해 다루었습니다.
⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다.

📃 오늘 공부한 것

이벤트 핸들링

이벤트 청취

v-on 은 @기호로 줄여서 사용할 수 있다.

메소드 이벤트 핸들러와 인라인 메소드 핸들러
호출하고자 하는 메소드 이름을 받아 이벤트를 호출하거나 인라인 JS 구문에 메소드를 사용할 수 있다.

<!-- vue3 예제 -->
<div id="event-with-method">
  <button @click="greet">Greet</button>
  <button @click="say('hi')">Say hi</button>
</div>

Vue.createApp({
  data() {
    return {
      name: 'Vue.js'
    }
  },
  methods: {
    greet(event) {
      if (event) {
        alert(event.target.tagName)
      }
    },
    say(message) {
      alert(message)
    }
  }
}).mount('#event-with-method')

복합 이벤트 핸들러
,로 이벤트를 여러개 지정하여 사용할 수 있습니다.

<!-- vue3 예제 -->
<button @click="one($event), two($event)">
  Submit
</button>

이벤트 수식어
이벤트 핸들러 내부에서 event.preventDefault() 또는 event.stopPropagation() 를 호출하는 일은 빈번하기 때문에 이를 해결하기 위해서 v-on이벤트에 이벤트 수식어를 제공한다.

<!-- vue3 예제 -->
<!-- 클릭 이벤트 전파가 중단되었습니다. -->
<a @click.stop="doThis"></a>

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

<!-- 수정자는 체이닝이 가능합니다. -->
<a @click.stop.prevent="doThat"></a>

<!-- 단순히 수식어만 사용이 가능합니다. -->
<form @submit.prevent></form>

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

<!-- event.target이 엘리먼트 자체인 경우에만 트리거를 처리합니다.-->
<!-- 자식 엘리먼트에서는 처리되지 않습니다.-->
<div @click.self="doThat">...</div>

키 수식어
키보드 이벤트를 사용할 수 있습니다.

<!-- 키가 'Enter'일때만 `vm.submit()`을 호출할 수 있습니다.-->
<input @keyup.enter="submit" />
<input @keyup.page-down="onPageDown" />
<!-- 알트 + 엔터 -->
<input @keyup.alt.enter="clear" />

.exact 수식어
다른 시스템 수식어와 조합해 그 핸들러가 실행되기 위해 정확한 조합이 눌러야하는 것을 요구한다.

<!-- 아래코드는 Alt 또는 Shift와 함께 눌렀을 때도 실행됩니다.-->
<button @click.ctrl="onClick">A</button>
<!-- 아래코드는 Ctrl키만 눌려져 있을 때 실행됩니다.-->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 아래 코드는 시스템 키가 눌리지 않은 상태인 경우에만 작동합니다.-->
<button @click.exact="onClick">A</button>

왜 HTML로 된 리스너를 사용하는가?

정말 중요한 질문이다.
이 이유는 우선 html 템플릿을 간단히 해 js 안에서 함수를 찾기가 편하기 때문이고 테스트가 편해지기 때문이다. 마지막으로 ViewModel이 파기되면 모든 이벤트 리스터가 자동으로 제거되기 때문이다!

더 배운 내용

• 리스트 렌더링
• 폼 입력 바인딩

🔥 느낀점

리스트 렌더링을 배울 때 v-for과 v-if 를 함께 사용하지 않는다는 것을 배웠다. 작년 vue를 접할 때 같이 사용하면 안된다는 것은 알고 있었지만 왜 안되는지는 살펴보지 않았었다. 동일한 노드에 있으면 v-if는 v-for보다 우선 순위가 높아 v-if 조건은 v-for 범위의 변수에 접근할 수 없다는 것, 이 부분을 깨닫게 되었다.

항상 공부를 할 때 그렇구나 하고 넘어가지 말고 왜 이런 개념이 나왔는지, 원인에 대해서 이해하고 사용하는 이유에 대해서도 알면서 공부해야겠다.

뭐든지 새로운 것을 배우는 것은 즐겁다👏🏻

Refer

프로그래머스 데브코스
Vue - 이벤트핸들링

정리

Day36