v-model을 이용한 Number Stepper 구현하기(vue3)

오늘은 v-model을 이용해서 간단하게 숫자 카운트하는 기능(일명 Number Stepper 또는 Stepper Input)을 만들어보도록 하겠습니다.

 

우선 기능 구현에 앞서 화면을 만들어보겠습니다.

 

좌우측으로 - + 버튼이 들어가고 가운데 인풋 박스가 들어갈 것입니다.

css는 아래와 같습니다.

  .addBtn{
    padding:100px;
    display: flex;
    flex-wrap: wrap;
    gap:3px;
    input, button{
      width:30px;
      height:30px;
      box-sizing: border-box;
      border:1px solid #ddd;
      border-radius: 8px;
    }
    input{
      width:50px;
      text-align: center;
    }
    button{      
      cursor: pointer;
    }
  }

 

그럼 이제 좌측 버튼 -을 누르면 숫자가 1씩 감소하고 +를 누르면 숫자가 1씩 증가하는 기능을 구현해보겠습니다.

<template>
  <div class="addBtn">
    <button
      @click="count--"	/* 1씩 감소 */
      :disabled="count === 0"	/* count가 0이면 disabled처리(동작 안함) */
    >-</button>
    <input type="text" v-model="count" readonly/>	/* 반응형 변수 count를 v-model로 설정  */
    <button
      @click="count++"  /* 1씩 증가 */
    >+</button>
  </div>
</template>
<script setup lang="ts">
  const count = ref(0);	// 카운트 변수 값을 반응형으로 설정
</script>

 

위의 코드를 설명하자면 v-model을 먼저 알아야 하는데요

 

★ v-model 특징 ★

• 양방향 데이터 바인딩
• 변수 값이 바뀌면 화면에도 실시간 반영
• 수동 바인딩보다 코드가 훨씬 간결해짐

v-model로 설정한 반응형 변수는 서로 연결됨

 

v-model 이라는 디렉티브를 사용할 경우 양방향 데이터 바인딩이 가능하게 되는데요 v-model="conut" 이렇게 설정을 하고 count 반응형 변수 값을 변경하게 되면 v-model="count" 가 적용된 입력 폼(input, select, textarea 등)의 value 값이 동일하게 변경됩니다.

 

서로 연결이 되어있기 때문인데요 이런 양방향 바인딩을 반응형 변수를 사용하지 않고 구현하게 되면 코드가 더 길어지게 됩니다. 

 

예를 들어 count 값을 변경 한 다음 특정 input의 value 값을 count로 업데이트해라

 

count값을 변경하고 input.value = count 라는 코드가 추가로 필요한 것이죠 그러나 v-model을 사용할 경우 이러한 코드가 필요 없기 때문에 코드가 간결해지는 것입니다.

 

완성된 코드를 보겠습니다.

 

 

v-model 디렉티브는 직관적이면서 사용하기가 편리해서 이전에 자바스크립트로 처리하던 코드를 더 간결하게 해줘서 코드를 작성하는데 효율적인 디렉티브라고 할 수 있습니다.

 

오늘은 간단히 v-model에서 알아봤습니다. 그럼 다음시간에 만나요~