v-model 대신 v-on를 사용해야하는 경우 (v-model 한글입력)

 

 v-model? v-on? 

 

둘의 차이점이나 사용처를 알기 위해서는 먼저 위의 두 기능이 어떤 역할을 하는지에 대해 알아보도록하자! 두 기능은 매우, 많이 사용되는 기능이기 때문의 vue의 기초강의나, 책에서도 무조건 나오는 필수 지식이다. 

 

 

v-model : 폼 입력 바인딩 방식 중 하나로 input 태그와 textarea태그 등에서 사용이 가능하다. 양방향 데이터 바인딩으로 내용이 작성하면 해당 내용이 선언한 데이터 값에 바로 적용된다. 

이미지를 누르면 gif가 작동합니다

위에 적혀진 내용처럼 해당 기능은 양항향 바인딩 기능이다. 사용자가 적은 내용을 특정 이벤트 없이 즉각적으로 선언한 변수에게 넣어준다. 내용을 입력받는 게시판, 회원가입, 댓글 등 여러가지 페이지에 적용할 수 있으며, 체크박스에서도 사용이 가능하다. 다만 체크박스를 v-model을 통해 사용할 경우, data에서 초기값을 선언해줘아햔다.

 

 

v-on : dom 이벤트가 트리거될 때 js를 실행할 수 있는 이벤트 리스너다. v-on을 줄여서 @로 작성하기도 한다. 해당 리스너를 이용하여 여러가지 이벤트가 가능한데 이벤트의 종류는 js나, 제이쿼리를 사용하신 분들에겐 익숙할 종류들이다. 외우지 않고 필요한 내용만 읽어도 무방하다!

 

이미지를 누르면 gif가 작동합니다

 

 

• click : 마우스로 클릭했을 때 실행되는 이벤트

• dblclick: 마우스로 더블클릭했을 때 실행되는 이벤트

• mouseover : 마우스포인트가 해당요소에 올라왔을 때 실행되는 이벤트

• mouseout : 마우스포인트가 해당요소를 벗어났을 때 실행되는 이벤트

• mousemove : 마우스포인트가 이동했을 때(움직일때) 실행되는 이벤트 

• mousedown : 마우스가 버튼을 눌렀을 때 실행되는 이벤트

• mouseup : 마우스가 버튼을 놓았을 때 실행되는 이벤트

• keyup : 키보드 키를 놓았을 때 실행되는 이벤트

• keydown : 키보드 키를 눌렀을 때 실행되는 이벤트

• keypress : 키보드 키를 눌렀다가 놓았을 때 실행되는 이벤트

• change : 요소가 변경될 때 실행되는 이벤트

• submit : form 태그에서 제출될 때 실행되는 이벤트

• reset : form 태그에서 리셋할 때 실행되는 이벤트

• select : select 태그의 값이 선택되었을 때 실행되는 이벤트

• focus : 태그에 포커스되어 있을 때 실행되는 이벤트

• blur : 태그가 포커스를 잃었을 때 실행되는 이벤트 

 

페이지 개발에서 중요한 여러 이벤트를 간략하게 사용이 가능하다. vue 개발자 도구를 통해 어떤 종류의 이벤트가 작동했는지도 확인이 가능하니, 내가 한 이벤트의 기능을 확인하고 싶을때 좋다.

 

 

 

---

 

 v-model이 뭐가 문제인데? 

 

기능을 쓱 보면, 사실 별 문제없어보이는 좋은 기능이다. v-on으로 핸들링을 굳이 거치지 않아도 자동으로 인식되니말이다. 그러나 해당 기능은 치명적인 문제가 있는데 바로 한글입력이다.

 

해당 오류에 대해서는 vue 공식사이트에서도 명시하고 있다. v-model을 영문 이외에 사용하는 경우 양방향바인딩이 한박자 늦게 반응하여 마지막 글자가 떨어져나가는 현상이 발생한다.

 

이미지를 누르면 gif가 작동합니다

이미지에서처럼 한글을 입력하면 방향키 또는 스페이스바를 눌러야지만 마지막 글자가 입력된다. 한국에서 사이트를 만들때 해당 오류는 정말 치명적인 오류다😓 다행히 아주 간단하게 해당 오류를 해결하는 방법이 있는데 위 사진에 쓰여있대로 input 이벤트를 사용하는 방법이다.

 

※ IME : 중국어, 일본어, 한글, 한자처럼 컴퓨터 자판에 있는 글자보다 많은 수의 글자를 조합하여 입력할 수 있도록 해주는 SW. 조합이 필요한 문자를 지원해주는 기술이라고 이해하자!

 

 

 

---

 

 v-on:input으로 한글입력오류 해결하기! 

 

위에 설명한 이벤트 종류외에도 input이 있는데 해당 이벤트와 v-bind를 이용하면 간단하게 오류 해결을 할 수 있다! 선언하는 방법은 여러가지가 있는데 가장 중요한 핵심내용은 데이터에 input태그로 받을 값을 선언한 후 v-bind를 이용하여 해당 선언변수를 value 값으로 연결하는것이다! 연결된 value값은 그동안 JS에서 실행했던 방식대로 event.target.value 를 통해 받아올 수 있다. 개인적으로 태그에 데이터를 선언해주는 방법과, 메소드를 거쳐서 선언하는 방법을 선호한다. 상황에 따라 맞는 내용을 사용하자!

 

첫번째. 태그에 직접적으로 선언해주는 방법

<!-- value에 사용할 변수를 데이터에 선언한 후 @input에 직접적으로 데이터를 연결하는 내용을 선언해준다. -->
<!-- template -->
<input type="text" :value="name" @input="name=$event.target.value">

<!-- data -->
data() {
    return {
      name:''
    }
  }

 

두번째. 메소드를 통해 선언해주는 방법

<!-- value에 사용할 변수를 데이터에 선언한 후 @input에 이벤트 명을 작성하여 메소드로 연결한다. -->
<!-- template -->
<input type="text" :value="name" @input="changeName">

<!-- data -->
data() {
    return {
      name:''
    }
  }


<!-- methods -->
methods: {
    changeName(e) {
      this.name = e.target.value
    }
  }

이벤트를 선언한 후, data값을 확인해보면 한박자 늦게 입력되던 오류가 깔끔하게 해결된 것을 확인할 수 있다!

 

 

이미지를 누르면 gif가 작동합니다

 

 

참고문서 : https://uxgjs.tistory.com/119

Vue.js의 이벤트 사용 방법 정리

참고문서 : https://kr.vuejs.org/v2/guide/forms.html

폼 입력 바인딩 — Vue.js