View
동기분 중에 이벤트 수식어에 대해 어려워하시는 분이 있어서 아는 지식을 최대한 정리하려고 한다. 말로 설명하려니깐 설명도 제대로 못하겠고 흑흑 누르면 툭 튀어나올 정도로 지식이 많고 탄탄하면 좋겠다. 일단 이벤트 수식어 중 모르겠다고 하신 부분에 대해 집중적으로 써보자.
이벤트수식어는 뭘까?
vue에서 정의하는 이벤트 수식어는 무엇일까? 해당 기능은 JS에 대한 보충 기능이기 때문에 공식에서 설명하는 내용을 먼저 읽어보는 것이 좋다.
내용에서 나오듯 vue의 이벤트 수식어는 기존에 js를 이용하며 이벤트 핸들러 내부에서 사용하던 event.preventDefault(), event.stopPropagation()의 보완기능이다. 그렇다면 preventDefault() 얘는 무슨 기능이고, stopPropagation() 이건 무슨 기능일까? 기존에 vue를 제외한 다른 프레임워크를 사용하며 js로 개발하시던 분들은 이 기능들을 한 번씩은 사용해보았을 것이다. 하나씩 기능을 이해해보자!
event.preventDefault()와 event.stopPropagation()
html을 많이 다뤄보지 않으셨다면 모를 수도 있는 내용인데 html 마크업 태그들 중에서는 고유의 동작 기능들이 존재한다. 위 기능들은 고유 동작들 때문에 생기는 오류들을 방지하며, 동시에 다른 이벤트들도 제어하는 기능이다. 먼저 고유 동작으로 생기는 오류를 정리해보자!
고유 동작을 가진 태그 중 대표적인 것은 링크를 생성하며, 페이지를 이동할 때나, 버튼으로 자주 사용되는 a태그와, form태그 안에 많이 사용하는 버튼 태그의 한종류인 submit이다. 여기서 발생하는 오류들은 a태그의 href로 발생하는 링크 이동 이벤트, form 안에 존재하는 submit을 누르면 자동으로 페이지 리로드가 되는 문제들이다. 필요한 기능이라면 오류라고 느껴지지 않지만, 개발 테스트를 하거나, 이동을 원치 않을 때는 정말 골치 아픈 기능이다.
event.preventDefault은 이벤트를 취소할 수 있는 경우에 그 이벤트를 전파하지 않고, 이벤트 자체를 취소시킨다. 쉽게 말하면 현재 이벤트의 기본동작을 중단한다. 해당 기능으로 태그에 붙어있는 고유 동작 기능들은 막을 수도 있고, 직접 작성한 이벤트 제어가 가능하다. event.stopPropagation은 이벤트 버블링, 캡쳐링의 전파를 막는 기능이다. 이벤트 전파의 이해가 어려울 수 있는데 쉽게 예제로 이야기해보겠다.
위 형태로 생긴 div 박스가 있다 생각하자. 각 box마다 클릭 이벤트를 지정해주고 하나씩 눌러보는 거다. 머릿속에서 생각하던 이상적인 결과는 1번을 누르면 1번 이벤트가, 2번을 누르면 2번 이벤트가, 3번을 누르면 3번 이벤트가 발생하는 것이다. 하지만 결과는 항상 우리의 예상을 벗어난다. 1번까지는 정상적으로 구동하지만 2번을 누르면 1번, 2번 이벤트가 동시에 발생하고, 3번을 누르면 1번, 2번, 3번이 주르륵 동시에 발생하는 오류가 생긴다. 이 문제가 바로 이벤트 전파다. 이를 방지하기 위해 event.stopPropagation를 사용한다.
아직도 이해가 잘되지 않는다면 해당링크를 들어가는 걸 추천한다! 예제가 충분히 존재하기 때문에 체감으로 해당 오류를 느낄 수 있다.
자주 쓰는 기능을 v-on으로 지원해주는 vue!
위에서 길게 설명했던 그 기능들을 vue는 프레임워크적으로 지원해준다. 함수 명도 줄여서 더욱 다양한 방향성으로 말이다! 그렇다면 vue에서 사용하는 이벤트 수식어는 어떻게 사용하고 무슨종류가 있을까? 하나씩 살펴보자. 일단 사용법은 간단하다. v-on으로 선언한 이벤트 뒤에 .을 붙여 원하는 명령어를 사용한다. vue의 이벤트 수식어는 다중으로도 사용할 수 있으니 원하는 명령어를 적절하게 배합해서 사용해보자!
<a v-on:발생이벤트.원하는이벤트수식어="메소드이벤트명"></a>
-
stop : stopPropagation과 같은 기능으로 이벤트 전파를 중지시킴
-
prevent : preventDefault와 같은 기능으로 기본이벤트의 실행을 중단시킴
-
capture : 포착단계에서만 이벤트를 발생시킴, 우선순위를 무시하고 가장 먼저 실행됨
-
self : 발생단계에서만 이벤트를 발생시킴, 오로지 자기 자신만 호출함
-
once : 이벤트를 한번만 실행시킴
-
passive : preventDefault의 반대 이벤트수식어로 기본이벤트를 취소할 수 없게 함
※ 기록 내용과는 상관없지만 a태그와 button 태그의 활용도 차이를 잘 인식하지 못하시는 분들이 있는 것 같아 첨언한다. 사실 뭘로 사용하던 기능만 작동하면 된다고 생각할 수 도 있지만 시맨틱 태그들이 나오고 html 표준화가 발달한 지금 용도에 맞는 태그를 사용하는 것은 아주 기본적인 사항이다. 사이트에서 링크를 연결하고 들어가는 방식은 a태그를 사용하고, 스크립트로 전송하고 움직이는 방식은 button 태그를 사용하는것이 좋다.
-
<a> : 페이지 또는 문서간의 url을 연결하는 용도로 사용함
-
<button> : 사용자 인터페이스 조작을 위한 버튼. type을 별도로 지정하지 않으면 기본값인 submit 지정됨
type=submit은 input에도 적용이 가능한데, 굳이 button 태그에 사용하는 이유는 CSS의 자유로움과 input의 submit은 내용을 가질 수 없기 때문이다. (input태그는 self-closing 태그)
설명에 대한 지적은 댓글로 부탁드립니다 :)
참고문서 : https://chlolisher.tistory.com/72?category=847028
참고문서 : https://eh-together.tistory.com/2
참고문서 : https://kr.vuejs.org/v2/guide/events.html
이벤트 핸들링 — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
kr.vuejs.org
참고문서 : https://kamang-it.tistory.com/entry/Vue-09%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%88%98%EC%8B%9D%EC%96%B4
[Vue-09]이벤트 수식어
JavaScript와 HTML, CSS등에 대해서는 일체 다루지 않는다. 기초지식은 다른 강의를 참조하도록 하라. 참고: [Package]Bower(Front End Pacakage 관리) 설치 [Package]Vue.js 이제 이벤트가 겹치면 어떻게 될까?..
kamang-it.tistory.com
'Review' 카테고리의 다른 글
| v-model 대신 v-on를 사용해야하는 경우 (v-model 한글입력) (2) | 2021.02.21 |
|---|---|
| 스택(Stack)과 큐(queue) (0) | 2021.02.05 |
| with 코어자바스크립트 (0) | 2021.02.03 |
| vue와 transition (0) | 2021.02.02 |
| Vue.js data () { return { } } VS data:() => ({ }), 어떤게 더 좋을까? (1) | 2021.01.21 |
