[Vue.js] watcher 로 데이터 감시하기

💡 실습 포인트!

• 이제 1~36 사이의 숫자를 입력하면, 해당 개월 수에 맞는 금액을 자동으로 계산하여 표시해준다.
• 영어든 한글이든 문자를 한 개라도 입력할 경우, 상단에 "숫자만 입력하세요." 라는 알림창을 띄워준다.
• 입력한 개월 수가 1보다 작으면 "최소 1개월부터 선택 가능합니다." 라는 알림창을 띄운 후 months 를 다시 입력할 수 있게 공란으로 바꿔주고, 입력한 개월 수가 36개월보다 크면 "최대 36개월까지 선택 가능합니다." 라는 알림창을 띄운 후 months 값을 36개월로 바꾸어준다.

---

💜 들어가기 전에

• 사용자가 <input> 에 입력하는 데이터는 무조건 String 타입의 문자열에 해당한다.
• 즉, 사용자가 123 을 입력했다고 해도 저장되는 값은 '123' 이 되는 것이다.
• 만약 문자열을 강제로 숫자로 바꾸어서 데이터로 저장하고 싶으면 v-model.number="데이터이름" 과 같이 v-model 에 .number 를 붙여주면 된다.
• 다만, 이 방법은 <input> 에 문자열이 입력되는 것 자체를 막을 수는 없으므로, 이를 막고 싶다면 watcher 를 사용하는 것이 좋다.

---

💜 watcher 사용하기

🤍 watcher 알아보기

<script>
export default {
	data(){
		return {
		}
	},
	watch: {
    	// 여기에 watcher 를 사용할 데이터를 적어주면 된다.
	},
}
</script>

• watcher 는 <script><script> 내에 watch : { } 라는 항목을 새로 만들어서 작성해주면 된다.
• 특정 데이터가 변경될 때마다 실행될 코드를 여기에 작성해놓으면, watcher 가 해당 데이터의 변경이 발생할 때마다 감지하여 여기에 기재된 코드가 실행된다.  

 

export default {
  name: 'Modal',
  data(){
    return {
      months : ""
    }
  },
  watch : {
    months(){
      // months 가 변경될 때 실행할 코드
    }
  }
}

• 이제 watch : { } 안에 함수를 집어넣을 수 있는데, 함수명은 내가 watcher 를 사용하고자 하는 데이터 이름으로 작성해주어야 한다.
• 예를 들어, 나는 그 전에 data 보관함에 만들어둔 months 라는 데이터에 watcher 를 사용하여 데이터 변경을 감지하고 싶다고 한다면 함수의 이름은 months 가 되는 것이다.
• 그리고 함수 안에는 months 가 변경될 때마다 실행할 코드를 작성해주면 된다.
• 함수에는 파라미터를 받아올 수 있는데, 첫번째로 받아오는 파라미터는 변경될 값, 두번째로 받아오는 파라미터는 변경전 값을 의미하며 최대 2개까지 받아올 수 있다.

---

🤍 watcher 사용해보기

// 전체 코드 미리보기
// 전체 코드 내용이 길어 불필요한 부분은 제외했다.

<template>
    <input @input="changeKeyword" :value="months">
    <p>{{months}}개월 선택: {{ rooms[clickedRoom].price * months }}원</p>
</template>

<script>
export default {
    name: 'Modal',
	data(){
		return {
			months : "",
		}
	},
	watch: {
		months(input){
			if (isNaN(input) === true){
				alert('숫자만 입력하세요.');
				this.months = "";
			}
			if (input > 36){
				alert('최대 36개월까지 선택 가능합니다.');
				this.months = 36;
			} else if (input < 1) {
				alert('최소 1개월부터 선택 가능합니다.');
				this.months = "";
			}
		}
	},
    methods: {
		changeKeyword(e){
			this.months = e.target.value;
		},
    }
}
</script>

• 애초에 나는 숫자만 입력받고 싶었기 때문에, 이를 해결하기 위해 구글링을 많이 해보았다.
• 문자가 입력되는 경우에 알림창을 띄우고 입력된 값을 초기화하고자 하였는데 v-model 을 사용했을 때 뭔가 이상하게 작동하는 것 같아 구글링을 해보았다.
• 구글링한 결과, v-model 을 사용했을 때 입력한 문자가 영어라면 정상적으로 양방형 바인딩이 되어 있어 바로바로 알림창이 제대로 뜨지만, 한글을 입력하는 경우에는 자음과 모음이 조합되지 않은 상태에서는 바인딩이 되지 않아 알림창이 제대로 뜨지 않는 문제가 발생한다는 사실을 알아냈다.
• 따라서, 이런 조합이 필요한 언어들은 v-model directive 를 활용할 때 문제가 생기므로, @input 을 활용해야 한다는 것이다.
• 그래서 v-model 대신 @input 을 사용하여 양방향 바인딩이 정확하게 되도록해주었다.
• 그 다음에, <input> 에 입력받은 값이 숫자가 아니라면 "숫자만 입력하세요." 라는 알림창이 뜨며 입력값이 공란으로 초기화되도록 해주었고, 입력받는 숫자는 1~36까지만 가능하도록 하여 해당 범위를 벗어나면 그에 알맞는 알림창과 함께 내가 지정한대로 값을 초기화하도록 해주었다.

---

📌 참고한 블로그 및 자료

• ​pygmalion0220 님의 tistory 블로그: [Vue] input에 숫자만 입력 가능하게 하기
• input type number accepts e character
• webruden 님의 tistory 블록그: Vue.js v-model 한글 사용 문제 초간단 해결 방법