Vue.js를 watch, computed 활용하여 전화번호 입력 필드를 개발하고, 입력된 데이터를 화면 표시와 내부 데이터 분리를 강조하여 관리하는 방법에 대해 살펴보겠습니다.
HTML 및 Vue 인스턴스 설정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js 전화번호 입력 필드</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="phoneNumber" type="text" placeholder="전화번호를 입력하세요">
<p>표시된 전화번호: {{ formattedPhoneNumber }}</p>
</div>
<script src="app.js"></script>
</body>
</html>
Vue 인스턴스 및 로직 설정 (app.js)
var app = new Vue({
el: '#app',
data: {
phoneNumber: '', // 사용자의 입력을 저장하는 데이터
},
computed: {
formattedPhoneNumber: function () {
// 입력된 전화번호에서 '-'를 제외하고 숫자만 반환
return this.phoneNumber.replace(/-/g, '');
},
},
watch: {
// 사용자가 입력한 값을 변경 감지하여 화면에 '-' 추가
formattedPhoneNumber: function (newVal) {
if (newVal.length === 10) {
this.phoneNumber =
newVal.slice(0, 3) + '-' + newVal.slice(3, 6) + '-' + newVal.slice(6);
}
},
},
});
동작 방식 설명
이 예제에서는 Vue.js를 사용하여 전화번호 입력 필드를 개발하고, 입력된 전화번호를 화면 표시와 내부 데이터 분리를 강조하여 관리합니다. 사용자가 입력한 전화번호는 phoneNumber 데이터에 저장되며, formattedPhoneNumber computed 속성은 입력된 전화번호에서 ‘-‘를 제외하고 숫자만 반환합니다. 또한 watch 속성을 활용하여 10자리의 전화번호가 입력되면 ‘-‘가 추가되어 화면에 표시됩니다.
이렇게 함으로써 화면에 표시된 값과 내부 데이터가 효과적으로 분리되어 관리되며, Vue.js의 강력한 데이터 바인딩 기능을 활용하여 사용자 경험을 개선할 수 있습니다.