Vue.js watch와 computed를 활용하여 화면표시와 내부 데이터 분리하는 방법

by

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의 강력한 데이터 바인딩 기능을 활용하여 사용자 경험을 개선할 수 있습니다.




Leave a Comment