[Vue.js] Vue 메소드(methods) 이해와 활용하기

메소드(methods)란?

Vue.js에서 메소드(methods)는 Vue 인스턴스의 메소드로, 템플릿 내에서 이벤트 핸들러나 계산된 데이터 로직을 처리하는 데 사용됩니다. 메소드를 사용하면 Vue 컴포넌트에서 재사용 가능한 로직을 정의하고, 이를 템플릿에서 호출하여 사용할 수 있습니다.

예제

아래 예제에서는 사용자가 버튼을 클릭할 때마다 카운터 값을 증가시키는 메소드를 선언하는 예제를 보여줍니다.

<template>
  <div>
    <p>카운터: {{ counter }}</p>
    <button @click="increaseCounter">카운터 증가</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    };
  },
  methods: {
    increaseCounter() {
      this.counter++;
    }
  }
}
</script>

설명

• increaseCounter 메소드는 버튼 클릭 이벤트가 발생할 때 호출됩니다.
• 메소드 내부에서는 this.counter 값을 증가시킵니다.
• 템플릿에서는 @click 디렉티브를 통해 해당 메소드를 호출합니다.

주요 특징

• 재사용성: 메소드를 사용하여 동일한 로직을 여러 곳에서 사용할 수 있습니다.
• 데이터 변경: 메소드 내부에서 데이터를 변경하면 Vue가 자동으로 리렌더링하여 화면을 업데이트합니다.