[Udemy Vue 완벽가이드 Section11] 143. v-model 수식어 및 숫자 사용하기

이번에는 age 입력란을 다뤄보자.

나이 입력란의 데이터타입은 숫자다. (input type="number")

하지만 type="number"라고 해서 입력한 데이터를 코드에서도 number타입으로 취급하는건 아니다.

분명히 number처럼 보이고, number말고는 입력할 수도 없는데 코드에서는 자동으로 number를 취하지 않는다.

 

data 프로퍼티로 userAge 초기값을 null로 하자.

<template>
  <form @submit.prevent="submitForm">
    <div class="form-control">
      <label for="age">Your Age (Years)</label>
      <input
        id="age"
        name="age"
        type="number"
        v-model="userAge"
        ref="ageInput"
      />
    </div>
    <div>
      <button>Save Data</button>
    </div>
  </form>
</template>
<script>
export default {
  data() {
    return {
      userAge: null,
    };
  },
  methods: {
    submitForm() {
      console.log('User age: ');
      console.log(this.userAge);
      console.log(31);
      this.userAge = null;
    },
  },
};
</script>

나이 입력란에 숫자를 적고 'Save Data'버튼을 클릭하면 submitForm메서드가 트리거된다.

 

 

# v-model로 가져온 숫자 입력값 → number

콘솔을 보면 나이 입력란에 작성한 '30'과 console.log(31)로 찍은 '31'이 차이가 없다. 두 숫자 모두 콘솔에서 '파란색'으로 나타난다. 즉 type이 둘다 number이다.

 

 

# ref로 가져온 숫자 입력값 → string

v-model을 작성하지 않고 ref로 가져오는 경우를 보자.

ref를 추가한 후, submitForm 메서드에서 console.log로 this.$refs.ageInput.value를 콘솔에 출력해보자.

네이티브 DOM요소에 액세스하고, value 프로퍼티에 액세스해 값을 출력한다.

이렇게 작성하고 나이 입력란에 32를 입력해보자.

  methods: {
    submitForm() {
      console.log(this.userAge);
      console.log(this.$refs.ageInput.value);
      console.log(31);
    },
  },

• 첫번째 32 : v-model에 바인딩되어 내부적으로 관리되는 data 프로퍼티.
• 두번째 32 : ref로 출력하는 값
• 마지막 31 : console.log로 출력하는 더미숫자

 

흥미로운 점은, 첫번째 32는 파란색, 두번째 32는 검은색이다.

즉, 파란색은 number 타입, 검은색은 string 타입이라는 뜻이다. 즉, 데이터 타입이 다르다.

 

왜 이런걸까?

data에서 관리하는 프로퍼티와 ref로 데이터를 가져오는 프로퍼티에 각각 5를 더해보자.

methods: {
    submitForm() {
      console.log(this.userAge + 5);
      console.log(this.$refs.ageInput.value + 5);
      console.log(31);
    },
  },

 

data 프로퍼티값은 37이 뜨지만, ref 프로퍼티값은 '325'가 뜬다.

이건 수학적 오류가 아니라, 32(string)와 5(number)가 한 문자열로 연결된거다.

(참고로, string + number = string이 된다.)

 

 

여기서 알아야 할 흥미로운 점은, 숫자 타입의 입력란에 v-model을 사용하면 자동으로 유저가 입력한 데이터를 문자열에서 숫자 타입 데이터로 변환한다는 것.

<input id="age" name="age" type="number" v-model="userAge" />

 

 

JavaScript만 사용하거나, refs 프로퍼티를 사용해서 네이티브 JS객체로 입력데이터(this.$refs.ageInput.value)를 나타낸다면 저장된 해당 값의 데이터 타입은 기본적으로 항상 문자열이다.

Vue는 v-model이라는 추가적인 기능을 통해 이 입력란의 데이터타입이 숫자임을 확인해 문자열 → 숫자로 변환해준다.

 

 

# 수식어를 통한 type 변경

타입을 변환하도록 '강제'할수도 있는데, 만약 다른 타입의 데이터를 사용한다면(type="text") v-model 뒤에 수식어(modifier)를 추가함으로써 Vue가 데이터를 변환하게 만들 수 있다.

number라는 수식어를 추가한다면, v-model이 자동으로 다른 타입을 '숫자' 타입으로 변환한다.

<input id="age" name="age" type="text" v-model.number="userAge" />

 

## 다른 수식어

number 외에도 다른 수식어들이 있다.

 

1) lazy

- 입력된 값이 바로 data에 반영되지 않고, enter를 누르거나 포커스가 벗어나는 등의 이벤트가 발생할 경우에만 값이 반영되어 나타난다.

- 바인딩한 프로퍼티를 업데이트하는 방법을 바꿀 수 있다. 모든 키 입력에 적용하거나, 일부 입력에만 적용하면 낮은 빈도로 업데이트한다.

 

2) trim

- 입력된 텍스트의 앞, 뒤에 붙은 불필요한 공백을 Vue가 제거하도록 한다.

- 문자열에 직접 trim 메서드를 작성하는것과 같은 같은 결과가 나타난다.

- trim을 추가하면 입력한 데이터 앞, 뒤에 입력한 공백이 나타나지 않게 만들 수 있다.

 

 

 

이렇게 애플리케이션에 나타나는 흔한 버그일 수 있다.

위 경우처럼, input에서 ref로 가져온 value가 숫자 타입이라고 생각했지만 실제로는 문자열 타입인거다.

 

그리고 v-model의 특별한 기능을 알아두는것도 특히 중요하다.

v-model이나 ref를 이용해 데이터에 액세스할 수 있지만, 사실 내부적으로는 이 두 방법이 조금 다르다.

ref를 사용해도 상관없지만 자동으로 타입변환이 일어나지 않는다는걸 알아야한다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.