인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

김주원님의 프로필 이미지

작성한 질문수

Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"

이벤트 처리

이벤트 수식어 event 전달인자 관련 질문

작성

·

37

0

안녕하세요~

1번은 전달한 인자를 그대로 함수에서 받아서 의문이 안생기는데,

2번은 인자를 전달하지 않았는데, 함수에서는 event 인자를 받네요? event 인자는 자동으로 사용가능한 개념인지요?

답변 주시면 감사하겠습니다~

 

1.

전달 한 인자를 함수에서 그대로 받음

printEventInfo('text', $event)

printEventInfo(message, event)

 

2.

인자를 전달하지 않았는데 함수에서는

event를 인자로 받음

@keyup="onKeyupHandler"

onKeyupHandler(event)

 

on

<template>
  <button @click="printEventInfo('text',$event)">inline event handler</button>
  <input type="text" @keyup="onKeyupHandler"/>
</template>
<script>
export default{
  const printEventInfo=(message, event)=>{
    console.log(message)
    console.log(event.target)
    console.log(event.target.tagName)
  }
  const onKeyupHandler=(event)=>{
   console.log(event.key)
  }
}
</script>

답변 1

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는 이를 더 편리한 문법으로 제공하는 것뿐입니다.