모든 폼 요소에서 v-model 사용하기
input, textarea, select, 체크박스, 라디오 버튼에서 요소 유형에 따라 v-model이 적용되는 방식을 알아봅니다.
모든 폼 요소에서 v-model 사용하기은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
양식 입력 바인딩
v-model은 양식 컨트롤과 반응형 상태 사이에 양방향 바인딩을 만듭니다. 텍스트, 체크박스, 라디오 버튼, 선택 목록, 여러 줄 입력란 등 각 컨트롤 종류는 v-model을 조금씩 다르게 사용합니다. 이 레슨에서는 모두 다룹니다.
텍스트 입력
텍스트 입력에서는 v-model이 값을 바인딩하고 입력될 때 업데이트합니다. 상자에 입력하면 참조가 실시간으로 업데이트됩니다.
<script setup>
import { ref } from 'vue'
const name = ref('')
</script>
<template>
<input v-model="name" />
<p>Hello, {{ name }}</p>
</template>여러 줄 입력란
여러 줄 입력란은 텍스트 입력과 똑같이 작동합니다. 요소에 직접 v-model을 사용하고 태그 사이에는 텍스트를 넣지 마세요.
<template>
<textarea v-model="message"></textarea>
</template>체크박스: 불리언
불리언 참조에 바인딩된 단일 체크박스는 true와 false 사이를 전환합니다.
<script setup>
import { ref } from 'vue'
const agreed = ref(false)
</script>
<template>
<input type="checkbox" v-model="agreed" />
<p>Agreed: {{ agreed }}</p>
</template>체크박스: 배열에 여러 값 넣기
여러 체크박스를 같은 배열 참조에 바인딩하세요. 선택된 각 체크박스의 value가 배열에 추가됩니다.
<script setup>
import { ref } from 'vue'
const hobbies = ref([])
</script>
<template>
<input type="checkbox" value="reading" v-model="hobbies" />
<input type="checkbox" value="coding" v-model="hobbies" />
<p>{{ hobbies }}</p>
</template>라디오 버튼
한 그룹의 라디오 버튼은 하나의 참조를 공유합니다. 참조에는 선택된 옵션의 value가 저장됩니다.
<script setup>
import { ref } from 'vue'
const picked = ref('')
</script>
<template>
<input type="radio" value="small" v-model="picked" />
<input type="radio" value="large" v-model="picked" />
<p>Picked: {{ picked }}</p>
</template>선택 목록: 단일 선택
단일 선택 목록은 선택한 옵션과 일치하는 값에 바인딩됩니다. 원한다면 빈 값을 가진 자리 표시자 옵션을 제공할 수 있습니다.
<script setup>
import { ref } from 'vue'
const city = ref('')
</script>
<template>
<select v-model="city">
<option value="">Choose</option>
<option value="paris">Paris</option>
<option value="tokyo">Tokyo</option>
</select>
</template>선택 목록: 여러 항목 선택
multiple 속성을 추가하고 배열에 바인딩하세요. 선택한 옵션이 배열에 모입니다.
<script setup>
import { ref } from 'vue'
const cities = ref([])
</script>
<template>
<select v-model="cities" multiple>
<option value="paris">Paris</option>
<option value="tokyo">Tokyo</option>
</select>
</template>값 수식어
수식어는 v-model의 동작을 세밀하게 조정합니다. .trim은 공백을 제거하고, .number는 숫자로 변환하며, .lazy는 입력할 때마다가 아니라 변경될 때 동기화합니다.
<input v-model.number="age" />
<input v-model.trim="username" />
<input v-model.lazy="note" />하나의 멘탈 모델
컨트롤 종류와 관계없이 v-model은 값을 받아들이고 변경 사항을 내보내는 방식으로 작동합니다. 컨트롤 유형에 따라 값의 형태만 불리언, 문자열 또는 배열로 달라집니다.
사용자 지정 입력 컴포넌트
v-model은 직접 만든 컴포넌트에서도 작동합니다. 사용자 지정 입력 컴포넌트는 modelValue prop을 선언하고 update:modelValue를 내보내므로 부모 컴포넌트에서는 기본 컨트롤처럼 사용할 수 있습니다.
<!-- parent -->
<MyTextInput v-model="name" />
<!-- child declares modelValue + emits update:modelValue -->빠른 확인
양식 바인딩에 대한 지식을 테스트해 보세요.
복습
양식 컨트롤에서의 v-model:
- 텍스트 입력과 여러 줄 입력란은 문자열에 바인딩됩니다.
- 단일 체크박스는 불리언에 바인딩되고, 여러 체크박스는 배열에 바인딩됩니다.
- 라디오 버튼은 선택된 값을 저장하는 하나의 참조를 공유합니다.
- 선택 목록은 값에 바인딩되며,
multiple을 사용하면 배열에 바인딩됩니다. - 수식어:
.trim,.number,.lazy
AI 튜터와 함께 HTML을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 42
- 레슨
- 156
자주 묻는 질문
“모든 폼 요소에서 v-model 사용하기” 강의는 무료인가요?
네 — “모든 폼 요소에서 v-model 사용하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“모든 폼 요소에서 v-model 사용하기”에서 뭘 배우나요?
input, textarea, select, 체크박스, 라디오 버튼에서 요소 유형에 따라 v-model이 적용되는 방식을 알아봅니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Vue Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“모든 폼 요소에서 v-model 사용하기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 모든 폼 요소에서 v-model 사용하기
- 폼 제출과 초기화
- 수동 검증 패턴
- 스키마 기반 검증을 위한 VeeValidate