Vue.js 이벤트 처리란?
Vue.js에서 이벤트 처리는 사용자의 입력이나 특정 동작(클릭, 키 입력 등)에 반응하는 기능입니다. Vue는 v-on 디렉티브를 이용하여 이벤트를 바인딩하며, 이를 @ 기호로 축약할 수도 있습니다.
1. 기본 이벤트 처리
버튼 클릭 시 이벤트를 실행하는 가장 기본적인 방식은 v-on:click을 이용하는 것입니다.
<button v-on:click="sayHello">클릭하세요</button>또는 @click으로 축약할 수도 있습니다.
<button @click="sayHello">클릭하세요</button>위 코드를 실행하면 버튼을 클릭할 때 sayHello 메서드가 실행됩니다.
2. 메서드를 이용한 이벤트 처리
Vue에서는 methods 속성에 이벤트 핸들러를 정의할 수 있습니다.
<div id="app">
<button @click="sayHello">클릭하세요</button>
</div>
<script>
const app = Vue.createApp({
methods: {
sayHello() {
alert('안녕하세요, Vue.js!');
}
}
}).mount('#app');
</script>3. 이벤트 객체 활용
이벤트 핸들러는 자동으로 이벤트 객체를 전달받을 수 있습니다.
<button @click="showEvent($event)">이벤트 정보 보기</button>methods: {
showEvent(event) {
console.log(event);
}
}이벤트 객체를 이용하면 클릭한 요소의 정보나 키보드 입력값 등을 확인할 수 있습니다.
4. 이벤트 수식어
Vue는 이벤트 처리 시 불필요한 동작을 막기 위해 **이벤트 수식어(modifier)**를 제공합니다.
.prevent: 기본 이벤트 동작을 막음.stop: 이벤트 전파 중단.once: 이벤트를 한 번만 실행
예를 들어, 폼 제출 시 페이지가 새로고침되는 것을 방지하려면 다음과 같이 사용합니다.
<form @submit.prevent="handleSubmit">5. 키보드 이벤트 처리
Vue에서는 키 입력 이벤트도 쉽게 처리할 수 있습니다.
<input @keyup.enter="submitInput" placeholder="Enter 입력 시 실행">위 코드는 사용자가 **Enter** 키를 눌렀을 때만 submitInput 메서드가 실행되도록 합니다.
마무리
이번 글에서는 Vue.js에서 이벤트를 처리하는 다양한 방법을 살펴보았습니다.
- @click을 이용한 기본 이벤트 처리
- methods를 이용한 이벤트 핸들링
- 이벤트 객체 활용
- 이벤트 수식어로 불필요한 동작 방지
- 키보드 이벤트 처리
다음 글에서는 **Vue의 반응형 시스템과 Watcher 활용**을 다룰 예정입니다. 기대해 주세요! 😊