[Vue3] 사용자의 input을 받는 법 (v-model)

1️⃣ 기본 개념

• 목표:
  • 사용자가 <input>에 입력한 값을 data에 저장하여, 이를 바탕으로 상품 수량 변경, 총금액 계산 등 여러 UI 기능을 구현
• 핵심 포인트:
  1. 이벤트 핸들러(@input, @change)로 처리 가능
  2. 더 간단하게 v-model 디렉티브 사용

---

2️⃣ Vue2 방식 vs Vue3 방식

Vue2 (기존 방식)

<template>
  <!-- 생략 -->
  <input @input="month = $event.target.value">
</template>
<script>
export default {
  data(){
    return {
      month: 0
    }
  }
}
</script>

Vue3 ( 방식)

• Refactoring 포인트:
  • <script setup>을 사용하여 간결하게 변수 선언 (Composition API)
  • v-model을 활용하여 자동 데이터 바인딩
• 예제 코드 (Modal.vue):

<template>
  <!-- 생략 -->
  <!-- v-model을 사용하면 @input을 사용한 것과 동일하게 동작 -->
  <input v-model="month">
</template>

<script setup>
import { ref } from 'vue';

const month = ref(0);
</script>

---

3️⃣ 동작 원리 및 설명

1. 이벤트 핸들러(@input / @change)
   • Vue에서 $event 객체를 통해 <input>의 입력값을 받아와 month에 저장
   • 예: @input="month = $event.target.value"
   • 하지만 v-model을 사용하면 자동으로 데이터 바인딩이 이루어짐
2. v-model 디렉티브
   • <input v-model="month">는 "여기에 입력된 값을 month에 바로 저장해주세요"라는 의미
   • 주의: 기본적으로 입력값은 문자형으로 저장됨
     • 숫자로 저장하고 싶다면 v-model.number="month" 사용
     • 예: <input v-model.number="month">
3. 반응형 데이터 업데이트
   • 사용자가 입력할 때마다 month 값이 갱신되고, 이 값을 이용해 실시간 UI 변경이 가능
   • 예를 들어, 사용자가 수량을 10으로 입력하면 총 가격 계산 등 다른 연산을 진행할 수 있음

---

4️⃣ 추가 팁

• 다양한 태그에도 적용:<textarea>, <select>, <input type="checkbox"> 등 다양한 요소에 v-model 적용 가능
• 숫자 변환:
  • v-model.number는 입력된 값이 숫자일 때 숫자로 변환해줌
  • 다만, 숫자가 아닌 문자열 입력은 그대로 저장됨
• 이벤트와 v-model의 차이:
  • @input 등 이벤트 핸들러를 직접 작성할 수도 있으나, v-model은 더 간결하고 직관적임

---

📌 정리

• v-model 사용법:
  • <input v-model="month"> 만으로 사용자 입력값을 간편하게 data에 저장
• 실시간 데이터 바인딩:
  • 입력값에 따라 다른 UI 기능 (예: 상품 수량, 총 금액 계산 등)을 쉽게 구현 가능