리액트 9 - 폼

오늘 알아볼 것

• 폼

form은 사용자로부터 데이터를 입력받기 위해 필요한 기능이다. 사용자가 form에 입력한 데이터에 접근하도록 하는 것을 제어 컴포넌트라 한다.

제어 컴포넌트
input, textarea, select와 같은 폼 엘리먼트는 일반적으로 state로 관리하고 업데이트 한다.
React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어한다.

ex)

const FormEditor = () =>{

	const[name, setName]= useState(""); 
	const[content, setContent]= useState(""); 
	const [alpa, setAlpa] = useState("A");
	
	
	const handleSubmit = (e) =>{
		alert(name + "이 말했다. " + content + alpa + "라고..");
		e.preventDefault();
	}
	return (
		<>
			<form onSubmit={handleSubmit}>
				<label>이름 :
					<input type="text" value={name} onChange={(e)=>setName(e.target.value)}/>
				</label>
			<br/>
				<textarea value={content} onChange={(e)=>setContent(e.target.value)}/>
			<br/>
				<select value={alpa} onChange={(e) => {setAlpa(e.target.value);}} >
					<option value="A">A</option>
					<option value="B">B</option>
					<option value="C">C</option>
				</select>
				
				<button>입력</button>
			</form>
	</>
	);
	
}

다중 입력 제어하기
각 엘리먼트에 name 어트리뷰트를 추가하고, 이를 통해 어떤 작업을 할지 선택할 수 있게 한다.

const [state, setState] = useState({
	name:"",
	content:"",
	alpa:"A",
})


const handleSubmit = (e) =>{
	alert(name + "이 말했다. " + content + alpa + "라고..");
	e.preventDefault();
}

const handleChangeState = (e)=>{
	setState({
		…state,
		[e.target.name]: e.target.value,
	});
}

return (
	<>
		<form onSubmit={handleSubmit}>
			<label>이름 :
				<input name="name" type="text" value={state.name} onChange={handleChangeState}/>
			</label>
		<br/>
			<textarea name="content"  value={state.content} onChange={handleChangeState}/>
		<br/>
			<select name="alpa" value={state.alpa} onChange={handleChangeState} >
				<option value="A">A</option>
				<option value="B">B</option>
				<option value="C">C</option>
			</select>
			
			<button>입력</button>
		</form>
</>
);

제어 컴포넌트와 비제어 컴포넌트

제어 컴포넌트는 사용자가 입력을 할때마다 렌더링하지만 비제어 컴포넌트는 사용자가 제출 등의 액션을 하기 전에는 리렌더링이나 동기화를 시키지 않는다.