Form과 Controlled Component

Form은 사용자로부터 입력을 받기 위해 사용

react와 html에서의 form에는 차이가 있다.

react는 component 내부에서 state를 이용해 data를 관리한다.

html은 element 내부에 data가 존재한다.

입력한 값에 접근하고 제어할 수 있는 Controlled Component와 여러 폼을 알아보자.

select

html에선

<select>
	<option selected value="grape"> 포도 </option>
</select>    

react

<select value={value} onChange={handleChange}>
	<option value="grape"> 포도 </option>
</select>    

여러 개의 옵션을 선택 가능하게 하려면 multiple 속성 지정

<select multiple={true} value={['B','C']}>

모두 value라는 attribute를 통해 값을 전달하고 값을 변경할 때는 onChange를 이용해 setValue() 함수를 이용해 변경한다.

file 같은 경우 Uncontrolled Component 읽기전용이라 react의 제어를 받지 않는다.

<input type="file" />

여러 개의 입력을 받는다면?

여러 개의 state를 선언하여 각각의 입력에 대해 사용하면 된다.

import React, { useState } from "react";

function SignUp(props) {
    const [name, setName] = useState('');

    const [gender, setGender] = useState('남자');

    const handleChangeName = (event) => {
        setName(event.target.value);
    };

    const handleChangeGender = (event) => {
        setGender(event.target.value);
    };

    const handleSubmit = (event) => {
        alert(`이름: ${name}, 성별 ${gender}`);
        event.preventDefault();
    };

    return(
        <form onSubmit={handleSubmit}>
            <label>
                이름:
                <input type="text" value={name} onChange={handleChangeName} />
            </label>
            <br />
            <label>
                성별:
                <select value={gender} onChange={handleChangeGender}>
                    <option value="남자">남자</option>
                    <option value="여자">여자</option>
                </select>

            </label>
            <button type="submit">제출</button>
        </form>
    );
}
export default SignUp;