양식 작성(1): 기능 이해

기본적으로 양식은 smart 컨테이너와 해당 요소로 구성됩니다.

<form>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <input type="password" name="password" minlength="8" required>
    <input type="submit" value="Submit" />
</form>

개요

일반적으로 양식 요소는 사용자의 입력을 처리하는 반면 양식 컨테이너는 다음 작업을 수행합니다.

변경 가능한 상태를 유지하고 양식 요소의 업데이트를 처리합니다.

친근한 형태의 UI를 렌더링합니다.

제출하기 전에 유효성 검사를 처리합니다.

제출 이벤트를 처리합니다.

다음 부분에서는 위의 4가지 작업에 대해 설명합니다.

다음은 React의 간단한 양식 구성 요소입니다.

function Form() {

    const [value1,setValue1] = useState("")
    const [value2,setValue2] = useState("")
    const [value3,setValue3] = useState("")

    const handleSubmit = (event) => {
        event.preventDefault();
        //do something mutating or uploading
    }

    return (
        <form onSubmit={handleSubmit}> 
            <InputElement1 value={value1} onChange={setValue1}/>
            <InputElement2 value={value2} onChange={setValue2}/>
            <InputElement3 value={value3} onChange={setValue3}/>
            <SubmitButton />
        </form>
    );
}

<form> 를 사용하면 이 HTML 태그가 몇 가지 기본 동작을 제공합니다.

해당 요소에서 제출 이벤트를 수신합니다. <input type="submit" /> 또는 <button type="submit" /> 둘 다 이 이벤트를 트리거할 수 있으므로 추가 이벤트 핸들러를 정의하지 않아도 됩니다.

매우 유용한 onSubmit 전에 입력 데이터의 유효성을 검사합니다.

action 속성에 정의된 새 페이지를 탐색하지만 종종 handleSubmit에서 더 많은 작업을 수행해야 하므로 event.preventDefault()에서 차단합니다.

다음 부분에서는 내장 제어 기능을 사용하여 양식을 최적화하는 방법에 대해 이야기하겠습니다.