[Udemy Vue 완벽가이드 Section2] 21. 이벤트 바인딩 이해하기(v-on)

사용자 입력 데이터나 이벤트에도 반응하는 동적 페이지를 만들고 싶다.

이런 이유로 Vue같은 프레임워크를 사용한다. 이런 프레임워크로 높은 수준의 반응형이자 동적인 웹 애플리케이션을 쉽게 만들 수 있다.

 

 

더 활발히 상호작용하고 반응하는 웹 애플리케이션을 만들기 위해, 사용자 입력 데이터에 따라 반응하는 방법과 Vue를 활용하는 방법에 대해 알아보자.

 

example:

Add버튼을 누르면 counter에 1이 추가 되고, Reduce버튼을 누르면 counter에 1이 줄어들도록 해보자.

Vanilla JS로 작성 시, document.getElementById로 버튼에 접근하거나 querySelector를 이용하여 addEventListener메서드로 이벤트 리스너를 추가할 수 있다.

document.querySelector('button').addEventListener();

 

 

# v-on

Vue를 사용하면, 위와 같이 일어나는 과정 하나하나를 정의할 필요가 없다. 대신, 선언형 접근 방식을 활용하고, 최종 결과를 선언함으로써 Vue가 방법을 찾게 만든다.

Vue는 HTML요소에 이벤트리스너를 추가하는 쉬운 방법을 제공한다 → v-on

특정 event에 반응할 때 쓰는 디렉티브.

 

1/ v-on 작성 방법

v-on은 인자를 취한다. 콜론(:)뒤에 수신하려는 이벤트를 취한다. ex: v-on:click

 

v-on뒤에 수신할 수 있는 이벤트는, HTML요소에서의 모든 기본 이벤트(네이티브 DOM이벤트)를 수신할 수 있다.

**DOM 이벤트에 대한 간단한 설명

- (네이티브) DOM 이벤트 : 웹 브라우저에서 기본적으로 제공하는 DOM 이벤트를 가리키는 용어.

웹브라우저는 DOM요소의 이벤트를 감지하고, 해당 이벤트에 대한 정보를 제공하는 방식으로 DOM 이벤트를 처리.

- DOM이벤트는 HTML요소나 DOM 노드에서 발생하는 이벤트. 사용자 상호작용(클릭, 마우스 이동, 키 입력 등)이나 브라우저의 특정 동작(페이지로딩, 에러 발생 등)에 대한 신호를 나타낸다.

ex: click, mouseenter, mouseleave, mouseover, keydown 등 순수 JavaScript에서 수신할 수 있는 모든 이벤트

 

그리고 ="counter++"와 같이 (=)뒤 ""안에는 click을 감지했을 때 실행할 코드(이벤트 리스너)를 명시해준다.

v-bind, 이중 중괄호({{ }})처럼 JavaScript 표현식을 만들 수 있다.

<button v-on:click="counter++">Add</button>
<button v-on:click="counter=counter - 1">Reduce</button>

 

버튼을 누를 때마다 counter의 값이 바뀐다. 이건 주로 웹페이지에서 일어나는 변화가 아니다.

→ 이를 위해 JS코드를 작성해야한다.

counter를 바꾸는 이벤트리스너를 추가 → counter가 바뀌면 본문인 p요소에 도달해서 화면에 보이는 숫자를 바꾼다.

이게 바로 화면 뒤에서 이루어지는 Vue의 기능. Vue와 같은 프레임워크의 핵심과도 같은 기능.

 

 

출력값과 이벤트리스너를 어디에 둘지 선언만 하면 된다.

<p>Result: {{ counter }}</p>

그러면 숫자를 더하고 이벤트 리스너를 다루는 일, 화면 뒤에서 counter를 업데이트하는건 Vue의 역할이다.

이게 Vue의 역할이자 Vue의 핵심 기능이며 가장 중요한 작업.

 

Vue만의 내장된 반응성 : counter의 변화를 감지하고, 실제로 렌더링하는 페이지에서 해당 부분을 update한다.

버튼 클릭 → counter의 변화 감지 → 페이지에서 counter가 사용된 부분을 찾아서 해당 부분 update

 

 

2/ v-on 축약어

v-on: 대신 @로 대체 가능하다.(아래 예시:각각 위아래가 동일.)

<button v-on:click="counter++">Add</button>
<button @click="counter++">Add</button>

<button v-on:click.right="counter=counter - 1">Reduce</button>
<button @click.right="counter=counter - 1">Reduce</button>

v-on: 과 @ 중 원하는걸 사용하되, 통일성 있게 하자.

@를 사용했다면, 일부가 아닌 모든 이벤트에 @를 사용하자.

 

 

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