Vue의 v-model 에 대해 알아보기

이 글은 Vue2를 기준으로 작성되었습니다.

Vue에서 제공하는 여러가지 편리한 기능 중 한 번쯤 정리하고 싶은 것들이 있었는데, 오늘은 v-model에 대해 볼 것이다.

HTML 태그에 v-model 적용하기

v-model은 장황하게 설명하는 것보다 직접 코드를 보는게 확 와닿을 것 같아 바로 예시로 넘어가겠다.

<input :value="email" @input="updateEmail" />

new Vue({
  data: {
    email: ''
  },
  methods: {
    updateEmail: function(event) {
      this.email = event.target.value;
    }
  }
})

input 박스에 입력하면 입력한 텍스트가 화면에 렌더링되는 간단한 코드이다. v-model을 이용하면 위 코드를 훨씬 간단하게 쓸 수 있다.

<input v-model="email">

new Vue({
  data: {
    email: ''
  }
})

v-model은 v-bind와 v-on을 합쳐놓은 것이다. (이를 two-way binding 이라 한다.) 덕분에 첫번째 코드와 같이 따로 updateEmail과 같은 이벤트 리스너를 등록하지 않아도, 알아서 email 값을 업데이트 해준다.

v-model은 내부적으로 prop의 기본값으로 value (:value)를, 이벤트의 기본값으로 input (@input)을 가진다. 또한, input 태그 뿐만 아니라 textarea, checkbox, select 와 같은 태그도 지원한다. 각각에 대한 v-model의 속성은 다음과 같다.

HTML 입력 태그에 따른 v-model 속성의 기본값
(1) input 태그: value / input
(2) checkbox 태그: checked / change
(3) select 태그: value / change

컴포넌트에 v-model 적용하기

한 가지만 더 보자. v-model은 html 태그 뿐만 아니라 직접 만든 컴포넌트에도 쓸 수 있다. 우선, input 박스를 별도의 컴포넌트로 분리하는 작업을 해보자.

// InputBox.vue
<template>
  <input @input="handleInput" :value=value/>
</template>

new Vue({
  props: ['value'] // value는 v-model의 기본 prop으로 주어진다.
  methods: {
    handleInput: function(event) {
      this.$emit('input', event.target.value); // input 이벤트 또한 v-model의 기본속성이다.
    }
  }
})

이제 InputBox를 부모 컴포넌트에서 사용해보자.

<template>
  <InputBox v-model="email" />
</template>

new Vue({
  data: {
    email: ''
  }
})

부모 컴포넌트에서 자식 컴포넌트인 InputBox에 v-model을 적용하는 방법은 HTML 태그에 적용하는 방법과 동일하다. 주목해야할 부분은 자식 컴포넌트 InputBox 이다. 앞전에 v-model은 prop의 기본값으로 value (:value)를, 이벤트의 기본값으로 input (@input)을 가진다고 했다. 이는 컴포넌트에도 똑같이 적용된다. 따라서, 부모 컴포넌트에서 따로 value prop을 설정하지 않아도, input 이벤트 리스너를 등록하지 않아도 자식 컴포넌트에서는 이들을 사용할 수 있다.

참고자료
https://joshua1988.github.io/web-development/vuejs/v-model-usage/
https://www.digitalocean.com/community/tutorials/how-to-add-v-model-support-to-custom-vue-js-components