18. Vue - 폼 입력 바인딩(V-model)

1. Form Input Binding

a) 단방향 데이터 바인딩 

- 단방향 데이터 바인딩이란, 이름 그대로 데이터가 일방통행한다는 뜻이다. 

- 다음 예제코드를 통해서 알아보자. 

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

<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

출력화면

- 위의 코드에서 확인할 수 있듯이, 개발자가 설정한대로 문자열이 생성된다. 

- 양방향이라면 유저가 원하는 대로도 설정할 수 있어야 되는 것이다. 

 

b) 양방향 데이터 바인딩

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

<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  },
  methods: {
    handler(event) {
      this.msg = event.target.value
    }
  }
}
</script>

 

출력화면

- 위의 코드를 해설하자면 다음과 같다. 

- @input 이벤트를 사용하여 어떤 값이 입력란에 입력되면 이벤트 핸들러가 동작한다.

- 핸들러에서는 입력된 값을 event객체를 통해 받아온 뒤에 msg 데이터를 갱신한다. (갱신 = 반응성) 

- 위의 과정을 통해서 사용자가 입력한 값이 h1태그에 출력되도록 만들었다. 

- 이것으로 양방향 데이터 바인딩이 완성된 것이다. 

 

---

2. v-model

- vue에서는 양방향 데이터 바인딩을 간편하게 구축할 수 있도록 내부에서 제공되는 v-model 기능이 있다. 

- 다음 예제코드를 통해서 알아보자. 

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

<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

출력화면

- v-model을 사용하므로 코드가 굉장히 간략화 된 것을 확인할 수 있다. 

- v-model 기능에서는 이전 코드에서 작성했던 이벤트 핸들러, :value, @input 이 모든 것이 내재되어 있기 때문이다.

 

a) v-model 활용(체크박스)

<template>
  <h1>{{ msg }}</h1>
  <input
    type="text"
    v-model="msg" />
  <input
    type="checkbox"
    v-model="checked" />
  <h1>{{ "checked = " + checked }}</h1>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!',
      checked: false
    }
  }
}
</script>

 

체크 여부에 따라 checked 변수의 값이 달라짐

---

3. v-model의 단점

- v-model의 단점중 하나는 한글에 취약하다는 것이다. 

- 한글은 자음과 모음이 만나서 하나의 단어가 되어야만 하나의 입력값으로 인지하기 때문이다. 

- 다음 사진을 살펴보자. 

 

- 이처럼 한글입력은 완료되었음에도 불구하고 데이터의 갱신이 안되는 상황이 발생한다.

- 그러므로 한글을 사용할 때에는 v-model 보다 다음과 같은 사용법을 권장한다. 

<template>
  <h1>{{ msg }}</h1>
  <input
    type="text"
    :value="msg"
    @input="msg = $event.target.value" />
  <input
    type="checkbox"
    v-model="checked" />
  <h1>{{ "checked = " + checked }}</h1>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!',
      checked: false
    }
  }
}
</script>