[React.js] Kossie Coder - 17강. InputField 컴포넌트로 빼내기 & Fragment

1. InputField.js : MovieForm.js의 input 태그 컴포넌트화

import React from "react";

const InputField = ({
	type,
	value,
	placeholder,
	onChange,
	errorMessage
}) => {
	return (
		// <React.Fragment>
		// <></> 태그는 React.Fragment를 줄인 태그이다.
		// react의 component는 반드시 하나의 태그로 감싸져야 하는데, div 태그로 감쌀 경우 css 충돌 등의 문제가 생길 수 있으므로 아무 효과가 없는 React.Fragment 태그로 감싼다.
		<>
			<input
				style={{borderColor: 'red'}}
				type={type}
				value={value}
				placeholder={placeholder}
				onChange={onChange}
			/><br/>
			<div style={{color: 'red'}}>{errorMessage}</div>
		</>
		// </React.Fragment>
	);
};

2. MovieForm.js : InputField.js 적용

...
import InputField from "./InputField";
...
	return (
		<form onSubmit={onSubmit}>
			<InputField
				type="text"
				value={movieTitle}
				placeholder="영화제목"
				onChange={e => setMovieTitle(e.target.value)}
				errorMessage={titleError}
			/>
			<InputField
				type="number"
				value={movieYear}
				placeholder="개봉년도"
				onChange={e => setMovieYear(e.target.value)}
				errorMessage={yearError}
			/>
			<button type="submit">영화추가</button>
		</form>
	);
...