[콜럼Vue스] 인라인 이벤트 처리

인라인 이벤트 처리란 Vue.js에서 템플릿 안에 바로 이벤트 핸들러를 넣어서 처리하는 방식임. v-on 디렉티브나 **@**을 써서 간단한 로직을 직접 작성할 수 있음. 복잡한 로직은 메서드로 빼는 게 좋지만, 간단한 경우 인라인 이벤트 처리로 바로 처리 가능함.

 

<div id="app">
  금액: <input type="text" v-model.number="amount" /><br />
  <button v-on:click="balance += parseInt(amount)">입금</button>
  <button v-on:click="balance -= parseInt(amount)">인출</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
      };
    }
  }).mount('#app');
</script>

 

1. 인라인 이벤트 처리 사용 부분

이 코드에서 인라인 이벤트 처리는 다음과 같이 사용됨:

<button v-on:click="balance += parseInt(amount)">입금</button>
<button v-on:click="balance -= parseInt(amount)">인출</button>

• **v-on:click="balance += parseInt(amount)"**는 버튼을 클릭했을 때 amount 값을 정수로 변환한 후 **balance**에 더하는 작업을 인라인에서 직접 처리함.
• **v-on:click="balance -= parseInt(amount)"**는 인출 버튼을 클릭했을 때 amount 값을 **balance**에서 빼는 작업을 인라인으로 처리함.

이것은 별도의 메서드 정의 없이 버튼 클릭 시 즉시 **balance**에 대한 연산을 수행할 수 있는 인라인 이벤트 처리의 예시임.

---

2. 인라인 이벤트 처리의 장점

• 간단한 작업: 복잡한 로직을 필요로 하지 않는, 단순히 몇 가지 연산이나 데이터 변환을 수행할 때 매우 간편함.
• 가독성: 간단한 로직은 인라인으로 바로 처리함으로써 코드가 간결해지고, 이벤트 처리 로직이 템플릿에서 직접적으로 보임.

예시에서:

• 클릭할 때 **balance**에 바로 연산이 적용되기 때문에, 별도의 메서드를 정의할 필요 없이 템플릿 안에서 이벤트와 관련된 동작이 수행됨.

---

3. 메서드와 인라인 이벤트 처리 비교

인라인 이벤트 처리와 메서드를 사용하는 방식을 비교하자면:

• 인라인 이벤트 처리는 간단한 작업에는 유용하지만, 복잡한 로직이나 재사용되는 코드가 있을 때는 유지보수에 불리할 수 있음.
• 메서드로 분리하면 코드가 더 모듈화되어 유지보수가 쉬워지고, 복잡한 로직도 깔끔하게 처리할 수 있음.

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

<script>
  var vm = Vue.createApp({
    name: "App",
    data() {
      return {
        amount: 0,
        balance: 0
      };
    },
    methods: {
      deposit() {
        this.balance += parseInt(this.amount);
      },
      withdraw() {
        this.balance -= parseInt(this.amount);
      }
    }
  }).mount('#app');
</script>

위처럼 메서드를 사용하면 더 복잡한 로직이 생기더라도 관리가 쉬워지고, 가독성도 좋아짐.

---

4. 결론

이 예제는 인라인 이벤트 처리를 보여주는 좋은 예시임. 템플릿 안에서 바로 **v-on**을 사용해 연산을 인라인으로 처리하여 간단한 작업을 구현할 수 있음. 다만 복잡한 로직일 경우에는 메서드로 분리하는 것이 유지보수에 유리함.