use:enhance 지시어
전체를 다시 불러오지 않고 클라이언트 측 가져오기로 양식 제출을 점진적으로 향상합니다.
use:enhance 지시어은(는) CoddyKit의 무료 Sveltejs Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Sveltejs Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
점진적 향상
폼은 JS 없이도 작동하며, use:enhance를 사용하면 fetch 기반 제출로 개선되어 더욱 빠르고 매끄러운 사용자 경험을 제공합니다.
enhance 가져오기
$app/forms에서 가져옵니다.
import { enhance } from "$app/forms";폼에 적용하기
폼 요소에 use: 디렉티브를 사용합니다.
<form method="POST" use:enhance>...</form>새로고침 없음
페이지가 새로고침되지 않습니다. SvelteKit이 fetch로 제출하고, 액션을 처리한 다음, 페이지를 반응적으로 업데이트합니다.
사용자 지정 핸들러
제출을 세밀하게 제어하려면 enhance에 콜백을 전달합니다.
<form use:enhance={({ formData }) => {
return ({ result }) => { /* custom handling */ };
}}>기본 동작
콜백이 없으면 enhance는 전체 페이지 제출과 동일하게 리디렉션하거나 데이터를 새로 고칩니다.
로딩 상태
스피너를 표시하려면 콜백의 지역 변수로 제출 상태를 추적합니다.
오류 복구
액션이 반환한 오류는 페이지의 form prop에 나타납니다.
낙관적 UI
즉각적인 피드백을 제공하려면 서버가 응답하기 전에 콜백에서 지역 상태를 업데이트합니다.
여러 폼
각 폼은 고유한 enhance 동작을 가질 수 있습니다. 전역 상태는 필요하지 않습니다.
중요한 이유
하나의 디렉티브로 HTML 폼의 견고함과 SPA의 매끄러움을 모두 얻을 수 있습니다.
빠른 확인
use:enhance는 무엇을 하나요?
복습
use:enhance는 기본 폼을 클라이언트 측 제출 방식으로 개선합니다. 콜백을 통해 동작을 사용자 지정할 수 있습니다.
AI 튜터와 함께 HTML을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 41
- 레슨
- 163
자주 묻는 질문
“use:enhance 지시어” 강의는 무료인가요?
네 — “use:enhance 지시어” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Sveltejs Academy 강의 전체를 잠금 해제할 수 있습니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“use:enhance 지시어”에서 뭘 배우나요?
전체를 다시 불러오지 않고 클라이언트 측 가져오기로 양식 제출을 점진적으로 향상합니다. 브라우저에서 직접 실행하는 실습 코드로 Sveltejs Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Sveltejs Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Sveltejs Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“use:enhance 지시어” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Sveltejs Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Sveltejs Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 동작을 사용하는 +page.server.js
- use:enhance 지시어
- 양식의 점진적 향상
- 동작에서 검증 오류 처리하기