폼 제출과 초기화
@submit.prevent, FormData, 폼 상태 초기화, 로딩 중 제출 비활성화를 다룹니다.
폼 제출과 초기화은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
양식 제출 처리
실제 양식은 페이지를 다시 불러오지 않고 데이터를 제출하고, 로딩 상태를 관리한 다음, 제출 후 양식을 초기화해야 합니다. 컴포지션 API와 몇 가지 디렉티브를 사용하면 이 작업을 깔끔하게 처리할 수 있습니다.
페이지 새로 고침 막기
기본적으로 양식을 제출하면 페이지가 다시 로드됩니다. @submit의 .prevent 수식어는 preventDefault()를 호출하므로 JavaScript에서 제출을 처리할 수 있습니다.
<form @submit.prevent="onSubmit">
<button type="submit">Send</button>
</form>반응형 양식 객체
서로 관련된 필드를 하나의 반응형 객체로 묶으세요. 각 입력은 해당 객체의 속성에 v-model을 사용합니다.
<script setup>
import { reactive } from 'vue'
const form = reactive({ name: '', email: '' })
</script>
<template>
<input v-model="form.name" />
<input v-model="form.email" />
</template>제출 처리 함수
처리 함수가 반응형 양식을 읽고 전송합니다. .prevent가 적용되어 있으므로 페이지는 그대로 유지됩니다.
<script setup>
async function onSubmit() {
await fetch('/api/users', {
method: 'POST',
body: JSON.stringify(form)
})
}
</script>로딩 상태 추적
요청이 진행되는 동안 사용자 인터페이스가 반응할 수 있도록 loading 참조를 추가하세요. 요청 전에 true로 설정하고 요청 후에는 false로 설정합니다.
<script setup>
import { ref, reactive } from 'vue'
const loading = ref(false)
const form = reactive({ name: '' })
</script>제출 중 버튼 비활성화
사용자가 양식을 두 번 제출하지 못하도록 :disabled를 loading에 바인딩하세요. 비동기 호출 전후로 loading을 전환합니다.
<script setup>
async function onSubmit() {
loading.value = true
try { await save() } finally { loading.value = false }
}
</script>
<template>
<button type="submit" :disabled="loading">Send</button>
</template>제출 피드백 표시
로딩 플래그를 사용해 버튼 텍스트를 바꾸거나 로딩 표시기를 보여 주면 작업이 진행 중임을 사용자에게 명확하게 알릴 수 있습니다.
<template>
<button :disabled="loading">
{{ loading ? 'Sending...' : 'Send' }}
</button>
</template>양식 초기화
form을 비우려면 각 필드를 initial 값으로 다시 할당하세요. 초기화가 안정적으로 작동하도록 initial 상태의 스냅샷을 보관하세요.
<script setup>
import { reactive } from 'vue'
const initial = { name: '', email: '' }
const form = reactive({ ...initial })
function reset() { Object.assign(form, initial) }
</script>성공적으로 제출한 후 초기화하기
요청이 성공하면 reset을 호출하여 사용자가 깨끗한 상태에서 다음 입력 항목을 작성할 수 있게 하세요.
<script setup>
async function onSubmit() {
loading.value = true
try {
await save()
reset()
} finally { loading.value = false }
}
</script>모두 함께 적용하기
완성된 패턴은 새로 고침 방지, 반응형 form, 로딩 상태 보호 장치, 비활성화된 버튼, 성공 시 초기화로 구성됩니다 — 대부분의 Vue form을 이루는 뼈대입니다.
try/finally를 사용하는 이유
비동기 작업을 try/finally로 감싸면 요청에서 예외가 발생하더라도 loading이 초기화됩니다. 그렇지 않으면 제출에 실패했을 때 버튼이 영구적으로 비활성화될 수 있습니다.
빠른 확인
제출에 관한 지식을 확인해 보세요.
복습
form 제출의 핵심 사항:
@submit.prevent는 페이지 새로 고침을 막습니다.- 필드를
v-model로 바인딩한 반응형 객체에 묶습니다. loadingref를 추적하고:disabled에 바인딩합니다.- 필드를 initial 값으로 다시 할당하여 초기화하며, 가능하면 성공했을 때 수행합니다.
try/finally를 사용하여 loading이 항상 초기화되도록 합니다.
자주 묻는 질문
“폼 제출과 초기화” 강의는 무료인가요?
네 — “폼 제출과 초기화” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“폼 제출과 초기화”에서 뭘 배우나요?
@submit.prevent, FormData, 폼 상태 초기화, 로딩 중 제출 비활성화를 다룹니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Vue Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“폼 제출과 초기화” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.