[콜럼Vue스] 이벤트 핸들러 메서드

이벤트 핸들러 메서드 요약

• 이벤트 핸들러 메서드는 Vue 컴포넌트에서 사용자 상호작용에 따라 호출되는 함수임.
• 메서드로 로직을 분리하여 템플릿의 복잡성을 줄이고, 가독성을 높임.
• 이 코드에서는 입금과 인출 버튼 클릭 시 각각 **deposit()**과 withdraw() 메서드가 호출되어 금액 처리와 유효성 검사가 수행됨.
• 유효성 검사나 조건 처리 같은 복잡한 로직은 인라인 이벤트 처리보다 메서드로 분리하는 것이 효율적임.

이처럼 이벤트 핸들러 메서드를 사용하면, Vue 컴포넌트에서 복잡한 로직을 더 명확하고 구조적으로 처리할 수 있음.

---

이벤트 핸들러 메서드란 Vue.js에서 **사용자 상호작용(이벤트)**이 발생했을 때, 해당 이벤트에 대한 처리 로직을 메서드로 정의하여 호출하는 방식을 말함. 이러한 메서드는 Vue 컴포넌트의 methods 옵션 안에 정의되며, 이벤트가 발생할 때 자동으로 호출되어 데이터 처리, UI 업데이트, 유효성 검사 등을 수행함.

<div id="app">
  금액: <input type="text" v-model.number="amount" /><br />
  <button @click="deposit">입금</button>
  <button @click="withdraw">인출</button><br />
  <h3>계좌 잔고: {{ balance }}</h3>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
  var vm = Vue.createApp({
    name: "App",
    data() {
      return {
        amount: 0,
        balance: 0
      };
    },
    methods: {
      // 입금 처리 메서드
      deposit() {
        let amt = parseInt(this.amount);
        if (amt <= 0) {
          alert("0보다 큰 금액을 입력해야 합니다.");
        } else {
          this.balance += amt;
        }
      },
      // 인출 처리 메서드
      withdraw() {
        let amt = parseInt(this.amount);
        if (amt <= 0) {
          alert("0보다 큰 금액을 입력해야 합니다.");
        } else if (amt > this.balance) {
          alert("잔고보다 많은 금액을 인출할 수 없습니다.");
        } else {
          this.balance -= amt;
        }
      }
    }
  }).mount('#app');
</script>

이벤트 핸들러 메서드 설명

1. 이벤트 핸들러 메서드란?
   • 이벤트 핸들러 메서드는 Vue 컴포넌트에서 사용자 이벤트(클릭, 입력 등)가 발생했을 때 자동으로 호출되는 함수임.
   • 이 메서드는 버튼 클릭이나 폼 제출 같은 이벤트에 반응하여 특정 작업을 수행하도록 설계됨.
   • 주로 UI 업데이트, 유효성 검사, API 호출 등에서 활용됨.
2. 예시 코드에서의 이벤트 핸들러 메서드 사용
   • 이 예시에서는 입금과 인출 버튼을 눌렀을 때 실행되는 두 가지 메서드인 **deposit**과 **withdraw**가 정의되어 있음.
   • 버튼 클릭 이벤트가 발생할 때 이 메서드들이 실행되어, 입금과 인출 동작을 처리함.

<button @click="deposit">입금</button>
<button @click="withdraw">인출</button>

 

• • @click="deposit": 입금 버튼을 클릭하면 deposit 메서드가 호출됨.
  • @click="withdraw": 인출 버튼을 클릭하면 withdraw 메서드가 호출됨.
• 메서드로 로직 분리
  • 메서드를 사용하면 복잡한 로직을 템플릿에서 분리하여 처리할 수 있음.
  • 이 코드에서는 유효성 검사(금액이 0보다 커야 하고, 인출 시 잔고보다 크지 않아야 함)를 처리하는 로직이 메서드 내부에 있음.

methods: {
  deposit() {
    let amt = parseInt(this.amount);
    if (amt <= 0) {
      alert("0보다 큰 금액을 입력해야 합니다.");
    } else {
      this.balance += amt;
    }
  },
  withdraw() {
    let amt = parseInt(this.amount);
    if (amt <= 0) {
      alert("0보다 큰 금액을 입력해야 합니다.");
    } else if (amt > this.balance) {
      alert("잔고보다 많은 금액을 인출할 수 없습니다.");
    } else {
      this.balance -= amt;
    }
  }
}

 

 

• • deposit(): 입력된 금액이 0보다 큰 경우에만 잔고에 더하는 입금 처리 로직이 있음. 그렇지 않으면 경고창을 띄움.
  • withdraw(): 입력된 금액이 잔고보다 작거나 같고 0보다 큰 경우에만 잔고에서 차감함. 그렇지 않으면 알림 메시지를 표시함.
• 왜 메서드를 사용하는지
  • 재사용성: 메서드를 정의하면 재사용할 수 있어, 여러 곳에서 동일한 로직을 사용할 수 있음.
  • 유지보수: 복잡한 로직을 메서드로 분리하면 템플릿이 간결해지고, 로직을 따로 관리할 수 있어 유지보수가 쉬워짐.
  • 가독성: 이벤트 핸들러 메서드를 사용하면 템플릿의 가독성이 좋아지고, 로직이 모듈화됨.