[Vuetify3] 폼/입력 컴포넌트

1️⃣ 폼/입력 컴포넌트 개요

1-1. 역할

• 사용자로부터 데이터 입력 받기
• 유효성 검증과 피드백 제공
• 다양한 UI 형태(텍스트, 선택, 토글, 체크 등) 지원

1-2. 주요 컴포넌트

컴포넌트역할실무 포인트

VForm	폼 래퍼, validation 관리	submit 이벤트, v-model 바인딩, ref로 유효성 체크
VTextField	단일 텍스트 입력	label, placeholder, outlined, dense, rules 활용
VTextarea	여러 줄 텍스트 입력	auto-grow, maxlength, hint, dense
VSelect	드롭다운 선택	items, multiple, chips, v-model
VCheckbox / VRadio / VSwitch	선택형 입력	v-model + 상태 표시, boolean 값 바인딩
VCombobox / VAutocomplete	검색 + 선택	자동 완성, 동적 리스트, v-model 바인딩
VFileInput	파일 업로드	multiple, accept, max-size, validation

---

2️⃣ VForm & Validation

• VForm은 유효성 체크의 기준
• 주요 패턴:

 

<v-form ref="formRef" v-model="valid"> <v-text-field v-model="email" label="Email" :rules="[rules.required, rules.email]" /> <v-btn :disabled="!valid" @click="submit">Submit</v-btn> </v-form>

• 실무 포인트
  • ref로 폼 전체 validate 가능: formRef.value.validate()
  • submit 버튼 disabled 처리
  • 개별 input rules 배열 사용 → 재사용 가능

---

3️⃣ VTextField / VTextarea

• 주요 props
  • v-model → 값 바인딩
  • label / placeholder → 안내 텍스트
  • outlined / filled → 스타일
  • dense → compact UI
  • readonly, disabled → 상태 관리
• 실무 팁
  • 유효성 규칙(rules)과 hint/placeholder 활용
  • 반응형 폼: VRow/VCol과 조합하여 모바일 1열, 데스크탑 N열

---

4️⃣ VSelect / VAutocomplete / VCombobox

• 드롭다운 선택 + 자동 완성
• items 배열로 옵션 지정
• multiple + chips → 다중 선택 표시
• v-model + return-object → 선택 값 객체 바인딩

실무 팁

• 서버 연동 시 VAutocomplete 사용
• 다중 선택 시 chips로 UX 강화
• disabled/readonly 옵션으로 접근성 고려

---

5️⃣ VCheckbox / VRadio / VSwitch

• boolean 값 선택/토글
• v-model binding 필수
• 라벨/힌트 사용
• 실무에서 상태 표시(활성/비활성, 알림 동의 등)에 자주 사용

---

6️⃣ VFileInput

• 파일 업로드 컴포넌트
• Props: multiple, accept, show-size, max-size
• Validation: 파일 타입, 사이즈 제한
• 실무: 파일 첨부, 이미지 업로드, drag & drop과 결합 가능

---

7️⃣ 실무 핵심 요약 (체크리스트)

1. 폼 래퍼: VForm → submit, validate, ref 활용
2. 텍스트 입력: VTextField, VTextarea → label, placeholder, rules, dense
3. 선택형 입력: VSelect, VAutocomplete, VCombobox, VCheckbox, VRadio, VSwitch
4. 파일 입력: VFileInput → multiple, accept, max-size
5. 실무 패턴
   • 유효성 체크: rules + form validate
   • 반응형: VRow/VCol과 조합
   • UX: placeholder/hint/chips/disabled/readonly 활용
6. 권장:
   • rules 재사용 → 코드 중복 최소화
   • v-model 통합 관리 → Vuex / Pinia 연동 가능

 

 

---

 

1️⃣ 필수 폼/입력 컴포넌트

컴포넌트실무 포인트

VForm	폼 전체 래퍼, validation 관리 (ref + validate())
VTextField / VTextarea	단일/다중 텍스트 입력, v-model, rules, label, placeholder
VSelect / VAutocomplete / VCombobox	드롭다운/자동완성/검색 선택, 단일/다중 선택, chips 활용
VCheckbox / VRadio / VSwitch	boolean 상태 선택/토글, v-model 바인딩
VFileInput	파일 업로드, multiple, accept, max-size, validation

---

2️⃣ 실무 적용 포인트

• Validation: rules + form validate, submit 버튼 disabled 처리
• 반응형: VRow/VCol과 조합
• UX: placeholder, hint, dense, readonly, disabled 활용
• 반복/재사용: rules, options(items) 재사용
• 상태 관리: v-model로 Vuex/Pinia 등과 통합