입력값을 state에 연결하고 제출 경계에서 검증합니다.
제어 입력은 value를 state에서 받고 onChange로 갱신합니다. 표시와 제출의 출처가 하나라 검증과 초기화가 예측 가능합니다.
label을 연결하고 서버에서도 같은 업무 규칙을 다시 검증합니다.
큰 상위 트리의 재렌더를 피하려면 폼 상태를 필요한 하위 컴포넌트 가까이에 둡니다.
value만 지정하고 onChange를 빠뜨리면 수정할 수 없는 입력이 됩니다.
로컬 프로젝트에서 확인해보세요제목이 3자 미만이면 제출을 막고 오류 문구를 표시하세요.
import { useState } from "react";
export default function App() {
const [title, setTitle] = useState("");
const [saved, setSaved] = useState("");
function submit(e) {
e.preventDefault();
setSaved(title.trim());
}
return (
<main>
<form onSubmit={submit}>
<label>
강좌명 <input value={title} onChange={(e) => setTitle(e.target.value)} />
</label>
<button>저장</button>
</form>
<p>{saved && "저장: " + saved}</p>
</main>
);
}