[React] Form 과 Controlled Component

 

✔ Form

 : 사용자로부터 입력을 받기 위해 사용한다.

 

✔ Controlled Components

 : 값이 리액트의 통제를 받는 Input Form Element (사용자의 입력을 직접적으로 제어할 수 있다.)

 

• 사용자의 이름을 받는 컴포넌트를 Controlled Components 를 이용하여 만들기

function NameForm(props) {
    const [value, setValue] = useState('');
    
    const handleChange = (event) => {
        // event.target.value : 해당 target 의 value 속성의 값 
        // 여기서 target 은 input element 임
        setValue(event.target.value);
    }
    
    const handleSubmit = (event) => {
    	alert('입력한 이름: ' + value);
        event.preventDefault();
    }
    
    return (
        <form onSubmit={handleSubmit}>
            <label>
                이름:
                <input type="text" value={value} onChange={handleChange} />
            </label>
            <button type="submit">제출</button>
        </form>
    )
}

여기에 이름을 입력하면,

알림이 뜬다.

 

• 모든 입력값을 대문자로 변경하기

const handleChange = (event) => {
    setValue(event.target.value.toUpperCase());
}

이러면 뭔 짓을 해도 대문자만 입력된다.