V-Model 동작 원리와 활용 방법

 

참고 자료 : https://joshua1988.github.io/web-development/vuejs/v-model-usage/

 

 

🚀 V-model이란?

    🔽  속성

공식 문서에 안내된 v-model 속성의 사용법은 아래와 같아요.

<input v-model="inputText">

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

 

이렇게 이용자의 입력을 받는 UI 요소들에 v-model이라는 속성을 사용하면 입력 같이 자동으로 뷰 Data 속성에 연결되게 되는 것이에요.

 

 

 

 

    🔽  v-model 동작 방식

v-model 속성은 v-bind와 v-on의 기능의 조합으로 동작하게 되요.
매번 개발자가 하나하나 v-bind와 v-on 속성을 다 지정해 주지 않아도 좀 더 편하게 개발할 수 잇게 고안된 문법인 것이에요. 앞에서 살펴본 코드를 아래와 같이 변경해도 동작하게 됩니다.

<input v-bind:value="inputText" v-on:input="updateInput">

new Vue({
	data: {
    	inputText: ''
    },
    
    methods: {
    	updateInput: function(event) {
        	var updatedText = event.target.value;
            this.inputText = updatedText;
        }
    }
})

 

여기서 우리는 3가지를 이해하고 넘어가야 하는 것이에요.

● v-bind 속성은 뷰 인스턴스의 데이터 속성을 HTML 요소에 연결.
● v-on 속성은 해당 HTML 요소의 Event를 뷰 인스턴스 Logic과 연결.
● 사용자 Event에 의해 실행된 뷰 Method 함수의 첫번째 인자에는 해당 Event가 들어온다.

 

💡 참고 사항
HTML 입력 요소의 종류에 따라 `v-model` 속성이 다음과 같이 구성.

1) input Tag에는 `value / input`
2) checkbox Tag에는 `checked / change`
3) select Tag에는 `value / change`

 

반응형

 

        📦 v-model이 만능 해결사?

빠르게 기능을 구현하고 프로토타이핑을 해 나갈 때는 v-model을 사용해도 좋으나, 현재 시점에서 IME 입력(한글, 일본어, 중국어에 대해서 아래와 같은 한계가 있습니다.

 

 

위 화면을 보면 한글 입력의 경우 한 글자에 대한 입력이 끝나야 inputText Data가 Input Box의 Text 값과 동기화 되는 것을 볼 수 있어요.

위와 같은 문제로 인해 뷰 공식 문서에서는 한글 입력을 다룰 때는 v-bind:value와 v-on:input을 직접 연결해서 이용하는 것을 권고 하고 있답니다.

 

 

        📦 v-model을 이용해서 한글 처리하는 방법

한글 입력을 처리할 때, v-model 대신 직접 Event와 값을 조합해서 Binding 하는 것은 개발자가 좋아하는 방법은 아닐 것이에요. 이럴 땐 아래와 같이 Input Component를 별도의 Component로 분리하면 v-model로 편하게 처리할 수 있어요.

<!-- BaseInput.vue - 싱글 파일 컴포넌트 구조-->
<template>
  <input v-bind:value="value" v-on:input="updateInput">
</template>

<script>
export default {
  props: ['value'],
  methods: {
    updateInput: function(event) {
      this.$emit('input', event.target.value);
    }
  }
}
</script>

위의 Code는 어떻게 동작을 하는 것일까요?

 

● BaseInput Component의 상위 Component에서 props로 받은 value를 input Tag 값으로 연결.
● Input Tag에 값이 입력 되면 Input Tag에서 input Event가 발생하고, updateInput Method 실행.
● updateInput Method에서 Input Tag에 입력된 값을 상위 Component input Envet로 전달.

이제 상위 컴포넌트에서 아래와 같이 이용할 수 있어요.

<!-- App.vue - 싱글 파일 컴포넌트 구조 -->
<template>
  <div>
    <base-input v-model="inputText"></base-input>
  </div>
</template>

<script>
import BaseInput from './BaseInput.vue';

export default {
  components: {
    'base-input': BaseInput
  },
  data: function() {
    return {
      inputText: ''
    }
  }
}
</script>

여기서 우리가 주목해야 할 부분은 사우이 컴포넌트에서 정의한 Data 값을 하위 컴포넌트로 내려보내는 부분인 것이에요.

평소에 사용하던 Props 속성 대신 v-model이 사용되었는데, 이미 앞 v-model 동작 방식에서 v-model 속성은 v-dind:value와 v-on:input을 조합해서 만들었다는 것을 공부 했기 때문에 v-model 속성에 연결한 값이 하위 컴포넌트에 value라는 Props 속성으로 내려 간다는 사실을 알 수 있어요.