• 개요

▪︎ 섹션 12. Froms

▫︎ Form과 Controlled Component

Form

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

React에서 Form - component 내부에서 state를 통해 데이터를 관리한다는 점에서 HTML과 차이가 있음!!

Controlled Components

• 사용자가 입력한 값에 접근하고 제어할 수 있도록 하는 컴포넌트
• 값이 리액트의 통제를 받는 Input Form Element

모든 데이더를 state에서 관리함! 리액트에서 모든 데이터를 관리할 수 있도록

→ 사용자의 입력을 직접적으로 제어할 수 있음!!

EX) 모든 입력값을 대문자로 변경

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

▫︎ 다양한 Forms

Textarea 태그

여러 줄에 걸쳐 긴 텍스트를 입력받기 위한 HTML 태그

function RequestForm(props) {
	const [value, setValue] = useState('요청사항을 입력하세요.');
	
	const handleChange = (e) => {
		setValue(e.target.value);
	}
	
	const handleSubmit = (e) => {
		alert('입력한 요청사항: ' + value);
		e.preventDefault();
	}
	
	return (
		<Form onSubmit={handleSubmit}>
			<label>
				요청사항:
				<textarea value={value}, onChange={handleChange} />
			</label>
			<button>type = "submit"</button>
		</Form>
	)
}

Select 태그

Drop-down 목록을 보여주기 위한 HTML 태그