Vue.js v-model 한글 사용 문제 초간단 해결 방법

vue.js v-model 한글 사용 문제 간단 해결 방법

ue.js를 사용하다보면, input 태그에 v-model 디렉티브를 사용해야될 경우가 굉장히 많습니다. 하지만, Vue에서 v-model 디렉티브를 활용할 때 한글과 같이 사용하면 조금 문제가 생기는데요. 영어를 사용할 때는 발생하지 않았지만, 한글에서는 왜 이러한 문제가 발생하는 것일까요?

현상

Vue에서 v-model 디렉티브를 사용할 때 일반적으로 아래와 같이 사용합니다.

<input v-model="keyword" />

일반적으로 Vue에서 v-model 디렉티브를 사용하는 방법

영어와 같은 경우 정상적으로 양방향 바인딩이 되어 있음을 확인할 수 있습니다. 하지만 한글일 경우 어떻게 될까요? 한글을 타이핑하면 조금 문제가 발생하는데요. 발생하는 이슈는 아래와 같습니다.

한글을 입력할 때 바로 v-model 디렉티브에 반영되지 않고, 지연이 발생하는 모습

한글을 입력할 때 키워드 데이터가 즉시 바인딩이 되는 것이 아닌 글자가 조합이 되어야 그제서야 바인딩이 되는 모습입니다. 왜 이러한 이슈가 발생하는 것일까요? 이러한 문제가 발생하는 이유는 바로 한글은 IME가 필요한 언어이기 때문입니다.

IME이란?

IME란 중국어, 일본어, 한글, 한자처럼 컴퓨터 자판에 있는 글자보다 더 많은 수의 문자를 계산하거나 조합하여 입력해주는 SW입니다. 문자의 조합이 필요한 언어에 추가적으로 필요한 기능이라고 생각하시면 좀 쉽게 와닿으실 수 있습니다.

이러한 언어의 조합이 필요한 언어들은 v-model 디렉티브를 활용할 때 조금 문제가 있기 때문에 @input 이벤트를 활용해서 v-model 디렉티브 기능을 대신해서 구현해야 정확한 데이터 바인딩을 할 수 있습니다.

Vue 공식문서를 보면, IME가 필요한 언어 (중국어, 일본어, 한국어 등)의 경우에는 IME 구성 중에 v-model이 업데이트되지 않을 수 있습니다. 만약 IME가 필요한 언어를 사용하고 있다면 v-model 디렉티브 대신 @input 이벤트를 사용하세요.

해결방법

해결법은 굉장히 간단합니다. v-model 디렉티브로 구현되었던 코드를 input 이벤트로 변경해서 처리하면 바로 해결됩니다. input 이벤트로 처리한 코드는 아래와 같습니다. 

<template>
  <div id="app">
    <input :value="keyword" @input="changeKeyword" />
    <p>keyword: {{ keyword }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: ''
    }
  },
  methods: {
    changeKeyword(e) {
      this.keyword = e.target.value
    }
  }
};
</script>

input 이벤트를 통해 v-model 디렉티브를 대체하는 예시

v-model 디렉티브에서 input 이벤트로 변경한 예시입니다. input에 한글을 입력해보면, 정확하게 keyword 데이터가 양방향 바인딩이 되는 것을 확인할 수 있습니다.