39 asked

0

안녕하세요 질문에 답변 드리기 전에 해당 질문은 Vue 문법이기 전에 자바스크립트 함수 전달 및 호출 방식의 차이이기에 이점을 먼저 말씀드리고 설명하도록 하겠습니다.

자바스크립트의 함수 전달과 실행의 차이를 상세한 예제로 설명드리겠습니다.

1. 일반적인 함수 전달과 실행의 차이

// 1. 함수 정의
const greeting = (name) => console.log(`Hello ${name}`);

// 함수 직접 실행
greeting('John');  // 출력: Hello John

// 함수 전달의 예
const people = ['John', 'Jane', 'Mike'];
// forEach에 함수 자체를 전달
people.forEach(greeting);  // 출력: Hello John, Hello Jane, Hello Mike

// 함수를 직접 실행하는 경우
people.forEach((name) => greeting(name));  // 위와 동일

2. 이벤트 핸들링에서의 실제 예제

// HTML
// <button id="btn1">직접 실행 버튼</button>
// <button id="btn2">함수 전달 버튼</button>
// <input id="input1" type="text">

// 1. 이벤트 핸들러 함수들
const printEventInfo = (message, event) => {
    console.log('메시지:', message);
    console.log('이벤트 타겟:', event.target);
    console.log('태그이름:', event.target.tagName);
};

const onKeyupHandler = (event) => {
    console.log('입력된 키:', event.key);
    console.log('이벤트 타겟:', event.target);
};

// 2. 함수를 직접 실행하는 방식
const btn1 = document.querySelector('#btn1');
btn1.addEventListener('click', (event) => {
    printEventInfo('버튼1 클릭됨', event);
});

// 3. 함수 자체를 전달하는 방식
const btn2 = document.querySelector('#btn2');
btn2.addEventListener('click', function(event) {
    console.log('이벤트 객체 자동 전달됨:', event);
});

const input1 = document.querySelector('#input1');
input1.addEventListener('keyup', onKeyupHandler);  // 이벤트 객체 자동 전달

3. 이것이 Vue에서는 이렇게 표현됩니다

<template>
  <!-- 1. 함수 직접 실행 방식 -->
  <button @click="printEventInfo('버튼1 클릭됨', $event)">직접 실행 버튼</button>
  
  <!-- 2. 함수 전달 방식 -->
  <button @click="onClickHandler">함수 전달 버튼</button>
  <input @keyup="onKeyupHandler" type="text">
</template>

<script>
export default {
  methods: {
    printEventInfo(message, event) {
      console.log('메시지:', message);
      console.log('이벤트 타겟:', event.target);
      console.log('태그이름:', event.target.tagName);
    },
    
    onClickHandler(event) {  // 이벤트 객체 자동 전달
      console.log('이벤트 객체 자동 전달됨:', event);
    },
    
    onKeyupHandler(event) {  // 이벤트 객체 자동 전달
      console.log('입력된 키:', event.key);
      console.log('이벤트 타겟:', event.target);
    }
  }
}
</script>

이처럼 Vue의 이벤트 핸들링은 자바스크립트의 기본적인 함수 전달 방식을 그대로 따르고 있습니다:

• 함수를 직접 실행할 때는 필요한 인자를 모두 명시적으로 전달해야 합니다

• 함수 자체를 전달할 때는 브라우저가 이벤트 발생 시 자동으로 이벤트 객체를 첫 번째 인자로 전달합니다

이러한 개념은 자바스크립트의 기본 동작이며, Vue는 이를 더 편리한 문법으로 제공하는 것뿐입니다.