[React.js] Kossie Coder - 5강. 폼에서 useState 사용하기

1. onChange

요소의 변화가 일어날 때 발생하는 이벤트

function App() {
	// username, password의 기본값이 ''로 고정되어 있기 때문에 input의 값을 바꾸려고 해도 바뀌지 않음.
	const [username, setUsername] = useState('');
	const [password, setPassword] = useState('');

	return (
		<div className="App">
			{/* input의 값을 바꾸기 위해 onChange 이벤트를 활용하여 setUsername, setPassword를 통해 useState 변수의 값을 갱신한다. */}
			<input
				placeholder="Username"
				value={username}
				onChange={(e) => setUsername(e.target.value)}
			/>
			<input
				placeholder="Password"
				value={password}
				onChange={(e) => setPassword(e.target.value)}
			/>
		</div>
	);
}

2. onSubmit

form의 Submit 기능을 발생시키는 이벤트

...
	const onSubmit = (event) => {
		event.preventDefault(); // Submit 시에 자동으로 페이지 새로고침을 막기 위한 이벤트 실행을 강제로 멈추는 함수
		console.log(username, password);
	};

	return (
		<div className="App">
			{/* form에 onSubmit 이벤트를 붙여주면 엔터키 만으로 Submit이 실행된다. */}
			<form onSubmit={onSubmit}>
				...
				<button type="submit">Login</button>
			</form>
		</div>
	);
...

---

강의 링크

https://youtu.be/UFtirvA6NDU