[Udemy Vue 완벽가이드 Section2] 24. 네이티브 이벤트 객체 사용하기

<input type="text" v-on:input="">
<!--input이벤트가 발생할 때(키입력이 있을때) 코드가 실행됨.-->

v-on을 통해 입력 요소에서 input이벤트를 수신할 것을 Vue에 알린다.

 

event에 keyup, keydown을 적어도 되지만 HTML요소인 <input>에서 수신할 수 있는 최고의 이벤트 : 'input'.

입력요소의 기본 DOM 이벤트로 Vue와 전혀 관련이 없고, 순수 JS에서도 input 이벤트를 수신한다.

 

app.js

methods: {
 setName(){
  this.name = ??
 }
}

setName함수에서 사용자가 입력한 값을 가져와 이름으로 설정하는게 까다로울 수 있다. 사용자가 입력한 값을 어떻게 알 수 있을까? → JavaScript 에 내장된 기본동작이 있다.

 

1/ 먼저, HTML 코드에서 setName메서드를 가리키게 한다. 그래서 키를 입력할 때마다 input이벤트가 일어나면서 setName메서드가 실행된다.

<input type="text" v-on:input="setName">

이렇게 v-on 디렉티브를 이용하여 이벤트가 발생할 때마다 실행될 이벤트리스너를 추가하면 그 함수(이벤트 리스너)가 자동으로 인수를 하나 얻게 된다. 브라우저에서 제공하는 인수라고 할 수 있다. 그 인수는 발생한 이벤트를 설명하는 객체.

 

setName()에 인수인 매개변수를 하나 받는다.

app.js

data(){
 return {
  counter: 0,
  name: '', //키를 입력할 때마다 사용자가 현재 입력한 값으로 업데이트 된다.
 }
},
methods: {
 setName(event) { //event 대신, 다른 매개변수 사용가능.
  this.name = event.target.value; //순수JS기능. Vue의 전용기능x. 입력한 값.
 },//매번 키가 입력될 때 setName함수가 호출된다.
}

 

index.html

<button v-on:click="reduce(5)">Reduce</button>
<!--위 reduce함수도 인수를 받을 수 있지만, 우리가 전달인자인 5로 덮어쓰기한 것.-->
<!--만약 reduce 이렇게 함수만 가리켰다면, 이벤트를 설명하는 객체인 인수를 받을 수 있다.-->

<input type="text" v-on:input="setName" />
<!--setName에 괄호를 써서 함수를 호출하는 대신, 함수 자체를 가리키고 있기 때문에 덮어쓰지는 않고 브라우저가 기본 이벤트 객체를 제공.-->
<!--이 이벤트객체는 이벤트 정보로 가득하다.-->
<!--이 객체가 제공하는건 이벤트가 발생하는 HTML요소에 대한 정보.여기서는 <input> 입력요소. 입력란에 저장된 값을 <input>요소에서 읽을 수 있다.-->
<!--이벤트의 대상에 엑세스하도록 event.target이라는 순수JS를 이용하면 이벤트가 발생한 요소에 액세스 가능.-->
<!--입력요소인 input은 value 프로퍼티를 가진다. 입력한 내용을 가져올 수 있다.-->

 

이벤트를 수신하게 하고(v-on:input="setName"), setName코드를 실행시키고, name이 변경되면 탐지해서 페이지상 필요한 곳에 업데이트 → Vue의 반응성이 작용하는 원리!

 

 

위와 같이 개발자 도구를 켜면, input창에 글자를 입력하면 실제 p태그 부분만 깜빡인다. 화면의 다른 곳은 전혀 깜빡이지 않는다. 이 부분이 화면에서 실제로 리렌더링 되는 곳. 코드에서 실제로 변경된 부분만 화면에서 리렌더링 된다. 중요하다!

 

만약 무언가가 바뀔 때마다 Vue가 전체 화면을 업데이트하면 성능이 떨어진다.

Vue는 영리해서 키 입력이 name만 바꾸는 걸 알고, 그 name을 사용한 곳만 찾아 변경한다.

여기서는 p태그 부분만 업데이트하고 나머지는 건드리지 않는다. 그러므로 더 좋은 성능을 발휘할 수 있다. 

 

 

 

만약,

v-on디렉티브에서 이벤트리스너에 다른 인수를 사용하면서 기본내장 이벤트 객체가 필요하다면?

 

즉, 함수를 '가리키는 것'(v-on:input="setName")이 아니라, 직접 호출(v-on:input="setName()")하여 다른 인수를 사용할 때, 또는 어떤 특별한 이유로 함수를 가리키지 못해도 기본내장 이벤트 객체가 필요할 때!

ex: '이름의 성'과 같이 다른 인수를 전달하면서 이벤트 객체가 필요한 경우

<input type="text" v-on:input="setName('oh')" />

methods: {
 setName(lastName){
  this.name = event.target.value + ' ' + lastName;
 }
}

 위 경우, 인수가 'oh'로 덮여있기때문에 기본 이벤트 객체를 더이상 받을 수 없다. 그래도 전달하려면 특별한 변수가 필요하다! → $event

<input type='text' v-on:input="setName($event, 'oh')" />

methods: {
 setName(event, lastName){//$event변수를 사용하면 이렇게 이벤트객체를 받아올 수 있다.
  this.name = event.target.value + ' ' + lastName;
 }
}

 

$event: 예약된 이름이고, Vue가 제공하는 변수. 브라우저를 통해 자동으로 얻는 기본 내장 이벤트객체에 대한 액세스를 제공한다.

메서드를 가리키지 않을 때만 가능하다. 즉, setName이 아닌 setName()와 같이 메서드를 호출할 때만!

 

때로는 반드시 $event 변수를 사용하여 자동으로 제공되는 내장 이벤트 객체에 액세스하면서 계속 명시적으로 고유의 코드를 실행하여 자체적인 인수를 전달해야하는 상황이 있다. 그럴 때 사용하면 유용 :)

 

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.