[React.js] Kossie Coder - 16강. 영화 폼 validation

1. MovieForm.js : form 입력 값에 대한 validation

...
	// 에러 메세지를 담을 state 변수
	const [titleError, setTitleError] = useState('');
	const [yearError, setYearError] = useState('');

	const validateForm = () => {
		// validate 전, 에러 메세지 리셋
		resetErrors();
		let validated = true;

		if (!movieTitle) {
			setTitleError('영화제목을 넣어주세요.');
			validated = false;
		}
		if (!movieYear) {
			setYearError('개봉년도를 넣어주세요.');
			validated = false;
		}
		return validated;
	};

	// 에러 메세지 리셋 함수
	const resetErrors = () => {
		setTitleError('');
		setYearError('');
	};

	const onSubmit = (event) => {
		event.preventDefault();

		if (validateForm()) {
			addMovie({
				id: Date.now(),
				title: movieTitle,
				year: movieYear
			});
			// 데이터 추가에 성공하면 에러 메세지 및 form 리셋
			resetErrors();
			resetForm();
		}
	};

	return (
		<form onSubmit={onSubmit}>
			<input
				type="text"
				value={movieTitle}
				placeholder="영화제목"
				onChange={e => setMovieTitle(e.target.value)}
			/><br/>
			{/* 에러 메세지를 출력할 div 태그 */}
			<div style={{color: 'red'}}>{titleError}</div>
			<input
				type="number"
				value={movieYear}
				placeholder="개봉년도"
				onChange={e => setMovieYear(e.target.value)}
			/><br/>
			<div style={{color: 'red'}}>{yearError}</div>
			<button type="submit">영화추가</button>
		</form>
	);
...