Vue 폼 바인딩 완벽 가이드 – v-model로 쉽고 강력하게 폼 데이터 관리하기

vue.js 뷰

Vue.js에서 폼 바인딩은 사용자 입력과 데이터 상태를 쉽고 강력하게 동기화할 수 있는 핵심 기능입니다. v-model 디렉티브를 활용하면 텍스트 입력, 체크박스, 라디오 버튼, 셀렉트 박스 등 다양한 폼 요소와 데이터 간의 양방향 바인딩을 간단하게 구현할 수 있습니다. 아래에서 실전 예제와 함께 폼 바인딩의 모든 것을 정리합니다.

 

---

 

v-model의 기본 원리

• v-model은 폼 요소의 값(value)과 Vue 인스턴스의 데이터 속성을 자동으로 연결합니다.
• 사용자의 입력이 바뀌면 데이터가 즉시 업데이트되고, 데이터가 바뀌면 입력값도 자동으로 변경됩니다.
• 내부적으로 v-bind와 v-on의 조합으로 동작합니다.

<template>
  <input v-model="message" placeholder="메시지를 입력하세요" />
  <p>입력한 메시지: {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

 

---

 

다양한 폼 요소와 v-model

 

1. 텍스트 입력(text), 여러 줄 입력(textarea)

<input v-model="name" placeholder="이름을 입력하세요" />
<textarea v-model="description" placeholder="설명을 입력하세요"></textarea>

 

2. 체크박스(checkbox)

• 단일 체크박스(불리언 값)

<input type="checkbox" v-model="isChecked" />

• 여러 값 선택(배열)

<input type="checkbox" value="apple" v-model="selectedFruits" /> 사과
<input type="checkbox" value="banana" v-model="selectedFruits" /> 바나나

 

3. 라디오 버튼(radio)

• 여러 옵션 중 하나 선택 
• <input type="radio" value="male" v-model="gender" /> 남성 <input type="radio" value="female" v-model="gender" /> 여성

 

4. 셀렉트 박스(select)

• 기본 사용

<select v-model="selected">
  <option value="apple">사과</option>
  <option value="banana">바나나</option>
</select>

• 옵션 동적 생성

<select v-model="selectedFruit">
  <option v-for="fruit in fruits" :key="fruit" :value="fruit">{{ fruit }}</option>
</select>

 

---

 

값 바인딩과 수식어

 

1. 값 바인딩

• v-model은 문자열뿐 아니라 객체, 숫자 등 다양한 타입의 값 바인딩을 지원합니다.

  <option :value="{ number: 123 }">123</option>

 

2. 수식어

• .lazy: 입력 필드가 포커스를 잃었을 때만 데이터 업데이트
• .number: 입력값을 숫자로 자동 변환
• .trim: 앞뒤 공백 자동 제거

<input v-model.lazy="message" />
<input v-model.number="age" type="number" />
<input v-model.trim="username" />

수식어는 입력 데이터의 처리 방식을 세밀하게 조정할 때 유용합니다.

 

---

 

컴포넌트에서 v-model 활용

• 컴포넌트에서도 v-model을 사용해 상위-하위 간 양방향 데이터 바인딩이 가능합니다.
• Vue 3.4 이상에서는 defineModel() 매크로를 활용하는 것이 권장됩니다.

예시: 커스텀 입력 컴포넌트

<!-- CustomInput.vue -->
<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
};
</script>

<!-- 부모 컴포넌트 -->
<CustomInput v-model="inputValue" />

이렇게 하면 부모의 inputValue와 자식 컴포넌트의 입력값이 자동으로 동기화됩니다.

 

---

 

결론

Vue.js의 v-model은 폼 입력 요소와 데이터 간의 양방향 바인딩을 매우 간단하게 구현할 수 있게 해줍니다.
텍스트, 체크박스, 라디오, 셀렉트 등 다양한 폼 요소에 적용할 수 있고, 수식어와 컴포넌트 바인딩까지 폭넓게 활용할 수 있습니다.
실무에서는 v-model을 적극적으로 활용해 폼 데이터를 효율적으로 관리해보세요!

 

[Vue] 뷰 폼 바인딩

 

[Vue] 뷰 이벤트 핸들링 완벽 가이드