[콜럼Vue스] 메서드 (Method)

메서드(Method)는 Vue.js에서 인스턴스나 컴포넌트 내에서 정의된 함수를 의미하며, 주로 이벤트 처리나 특정 동작을 수행할 때 사용됨. Vue 인스턴스의 methods 옵션 안에 정의된 함수들은 템플릿에서 쉽게 호출할 수 있으며, Vue 인스턴스의 데이터에 접근하고, 이를 변경할 수 있음.

---

요약:

• 메서드는 Vue 인스턴스나 컴포넌트에서 특정 동작을 수행하는 함수로, 이벤트 처리나 데이터 조작을 담당함.
• 템플릿에서는 이벤트 디렉티브(@click, @input 등)를 사용하여 메서드와 사용자 상호작용을 연결할 수 있음.
• 메서드 내부에서 **this**를 사용하여 Vue 인스턴스의 데이터에 접근하고 수정할 수 있음.
• 메서드와 계산된 속성의 차이는 캐싱 여부이며, 복잡한 연산에서는 계산된 속성이 더 유리함.

---

1. 메서드의 기본 사용법

Vue 인스턴스나 컴포넌트 내에서 메서드를 정의하려면, methods 옵션에 함수를 정의함. 템플릿에서는 이벤트 처리나 기타 사용자 인터랙션에 따라 메서드를 호출할 수 있음.

<div id="app">
  <p>{{ message }}</p>
  <button @click="changeMessage">Change Message</button>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
    methods: {
      changeMessage() {
        this.message = 'Message Changed!';
      }
    }
  });
</script>

 

• methods: Vue 인스턴스의 메서드들을 정의하는 곳.
• @click="changeMessage": 버튼 클릭 시 changeMessage 메서드가 호출됨.
• this: 메서드 내부에서 Vue 인스턴스 자체를 가리키며, **data**에 정의된 값에 접근하고 수정할 수 있음.

2. 메서드와 템플릿의 연결

메서드는 템플릿에서 직접 호출할 수 있으며, 주로 이벤트 처리에 사용됨. Vue의 템플릿에서는 이벤트 디렉티브(@click, @input 등)를 사용하여 메서드와 사용자 이벤트를 연결함.

텍스트 호출시 메서드 예시 :

<div id="app">
  <input v-model="message" @input="logMessage">
  <p>{{ message }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello!'
    },
    methods: {
      logMessage() {
        console.log(this.message);
      }
    }
  });
</script>

 

• @input="logMessage": 입력이 변경될 때마다 logMessage 메서드가 호출됨.
• this.message: Vue 인스턴스의 message 데이터에 접근하여 그 값을 출력함.

3. 메서드와 this의 역할

Vue의 메서드 내부에서 **this**는 Vue 인스턴스 자체를 가리킴. 따라서 **this**를 통해 data, computed, methods 등 Vue 인스턴스의 모든 속성에 접근할 수 있음. 특히, data 속성의 값을 읽거나 수정할 때 this가 필요함.

methods: {
  updateCount() {
    this.count++;  // this를 통해 data 속성인 count에 접근
  }
}

• this.count: data에 정의된 count를 가리킴. 메서드 내부에서 데이터를 변경할 때는 반드시 this를 사용하여 Vue 인스턴스의 데이터를 참조해야 함.

4. 메서드와 계산된 속성(Computed)과의 차이점

• 메서드: 호출할 때마다 매번 실행되며, 캐싱되지 않음. 메서드는 주로 이벤트 처리나 즉각적인 계산을 위해 사용됨.
• 계산된 속성(Computed): 의존하는 데이터가 변경될 때만 다시 계산되며, 그 외에는 캐싱된 값을 반환함. 주로 복잡한 연산이나 값의 변경을 감시할 때 유리함.

메서드 예시 :

methods: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
}

계산된 속성 예시 :

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
}

• 메서드는 호출될 때마다 값을 계산하며, 계산된 속성은 캐싱된 값을 반환하기 때문에, 동일한 연산을 반복적으로 수행해야 한다면 계산된 속성을 사용하는 것이 성능에 유리함.

5. 메서드에서 인자 전달

Vue 메서드에서는 인자를 전달할 수 있으며, 템플릿에서 메서드 호출 시 함수 인자를 넘길 수 있음. 이를 통해 사용자 입력이나 이벤트 정보 등을 메서드로 전달할 수 있음.

<div id="app">
  <button @click="greet('Hello')">Greet</button>
</div>

<script>
  new Vue({
    el: '#app',
    methods: {
      greet(message) {
        console.log(message);
      }
    }
  });
</script>

 

• @click="greet('Hello')": 버튼 클릭 시 greet 메서드에 'Hello'라는 인자를 전달함.
• greet(message): 메서드는 전달된 인자를 받아서 처리함.

6. 메서드에서 이벤트 객체 사용

메서드는 이벤트 객체를 받을 수 있으며, DOM 이벤트와 관련된 정보를 메서드로 전달할 수 있음. 이벤트 객체는 보통 메서드의 마지막 인자로 전달되며, 메서드에서 이벤트와 관련된 작업을 처리할 수 있음.

<div id="app">
  <button @click="handleClick">Click Me</button>
</div>

<script>
  new Vue({
    el: '#app',
    methods: {
      handleClick(event) {
        console.log(event);  // 이벤트 객체 출력
      }
    }
  });
</script>

 

• @click="handleClick": 버튼 클릭 시 handleClick 메서드가 호출되며, 이벤트 객체가 자동으로 전달됨.
• event: 메서드에서 클릭 이벤트에 대한 정보를 담고 있는 객체로, 클릭 위치, 대상 요소 등의 정보를 포함함.

이벤트 객체와 인자 함께 사용 :

<button @click="greet('Hello', $event)">Greet</button>

• $event: 현재 발생한 이벤트 객체를 템플릿에서 메서드로 전달할 수 있음.

7. 메서드 활용 예시

(1) 폼 입력 처리

사용자가 폼에 입력한 값을 처리하는 메서드.

<div id="app">
  <input v-model="name" @input="logName">
  <p>Your name is: {{ name }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      name: ''
    },
    methods: {
      logName() {
        console.log(`Name is: ${this.name}`);
      }
    }
  });
</script>

• 입력 필드에 값이 입력될 때마다 logName 메서드가 호출되어 name 데이터가 콘솔에 출력됨.

(2) 버튼 클릭 시 상태 변경

버튼 클릭에 따라 데이터를 변경하고, UI를 업데이트하는 메서드.

<div id="app">
  <button @click="incrementCount">Click Me</button>
  <p>Count: {{ count }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      count: 0
    },
    methods: {
      incrementCount() {
        this.count++;
      }
    }
  });
</script>

• incrementCount 메서드는 버튼을 클릭할 때마다 count 값을 1씩 증가시킴.