폼 입력 바인딩

v-model 이라는 디렉티브를 사용하여 양방향 데이터 바인딩을 생성하는 폼 입력 바인딩에 대해 알아봅니다. 더욱 자세한 사항은 공식 문서를 참고해주시기 바랍니다.

1. 단방향 데이터 바인딩

우리가 실제로 양방향 데이터 바인딩의 개념을 정확히 이해하기 위해 단방향 데이터 바인딩에 대해 알아보도록 합시다.

<h1>{{ msg }}</h1>
<input type="text" :value="msg" />

export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  }
}

실제로 저희는 위와 같이 데이터를 스크립트 태그로 연결하여 Vue에서 활용할 수 있었습니다. 이렇게 데이터를 출력하는 방법을 단방향 데이터 바인딩이라고 합니다.

msg라는 데이터를 value 속성과 h1 태그의 content로 연결하여 화면에 출력하였습니다. 데이터에서 html 쪽으로 한 방향으로만 흐르기 때문에 단방향 데이터 바인딩이라 부르는 것입니다. 그렇기 때문에 input 요소를 수정한다하더라도 수정된 내용이 msg 데이터를 갱신하지 않는 것입니다.

2. 양방향 데이터 바인딩

그렇다면 양방향 데이터 바인딩은 어떤 것일까요?

<h1>{{ msg }}</h1>
<input type="text" :value="msg" @input="msg = $event.target.value"/>

이처럼 input 요소에 이벤트를 청취하도록 합니다. 그리고 msg의 데이터에 $event.target.value를 할당합니다. 이를 통해, msg의 기본값인 'Hello world!'에 수정을 하면 반응성이 이루어져 $event.target.value 값으로 다시 할당이 되는 것입니다.

이러한 개념이 바로 데이터가 양쪽으로 흐르는 양방향 데이터 바인딩이라는 것입니다.

3. v-model

3.1 사용법

위의 양방향 데이터 바인딩을 인라인 요소로 html에 입력하였습니다. 하지만, 이를 더 간단하게 표현할 수 있는 방법이 있으며 그것이 바로 v-model입니다.

<h1>{{ msg }}</h1>
<input type="text" v-model="msg" />

3.2 유의사항

그러나 v-model의 경우 input 요소에 영어가 아닌 한글을 입력하게 되면, 하나의 글자가 완성되지 않으면 연결되지 않습니다. 한 박자 느리게 동작을 하게 되는거죠.

그 이유는 한글이 자음과 모음으로 되어 있어 하나의 문자가 완성되기 전까지는 동작이 지연되기 때문입니다. 이러한 이유로 한글 입력 시에는 v-model이 아닌 $ event.target.value를 사용하셔야 합니다.

<h1>{{ msg }}</h1>
<input type="text" :value="msg" @input="msg = $event.target.value"/>