form element
<input> , <textarea>, <select>
→ 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트
React에서 변경할 수 있는 state는 일반적으로 컴포넌트의 state 속성에 관리되고 setState()에 의해 업데이트됨
제어 컴포넌트
React에 의해 값이 제어되는 입력 폼 엘리먼트를 제어 컴포넌트로 만들어 사용
→ 사용자가 입력한 값과 저장되는 값이 실시간으로 동기화
→ 상태가 바뀔때마다 렌더링
<input> 태그 활용 예
export default function NameForm() {
const [value, setValue] = useState('');
const handleChange = (e) => {
setValue(e.target.value);
}
const handleSubmit = (e) => {
alert('A name was submitted: ' + value);
e.preventDefault();
}
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" value={value} onChange={handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
단, input의 type이 file과 같은 readonly일 경우 비제어 컴포넌트로 여겨짐
<select> 태그의 활용 예시
export default function FlavorForm() {
const [value, setValue] = useState('coconut');
const handleChange = (e) => {
setValue(e.target.value);
}
const handleSubmit = (e) => {
alert('Your favorite flavor is: ' + value);
e.preventDefault();
}
return (
<form onSubmit={handleSubmit}>
<label>
Pick your favorite flavor:
<select value={value} onChange={handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</label>
<input type="submit" value="Submit" />
</form>
);
}
※ multiple 옵션을 허용한다면 value에 배열을 전달할 수 있음
<select multiple={true} value={['B', 'C']}>
비제어 컴포넌트 방식
export default function App() {
const inputRef = useRef();
const onClick = () => {
console.log(inputRef.current.value);
};
return (
<div className="App">
<input ref={inputRef} />
<button type="submit" onClick={onClick}>
전송
</button>
</div>
);
}