// MovieForm.js
import React, { useState } from 'react';
import InputField from './InputField';
const MovieForm = ({ addMovie }) => {
const [movieTitle, setMovieTitle] = useState('');
const [movieYear, setMovieYear] = useState('');
const [titleError, setTitleError] = useState('');
const [yearError, setYearError] = useState('');
const resetForm = () => {
setMovieTitle('');
setMovieYear('');
};
const validateForm = () => {
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,
});
resetErrors();
resetForm();
}
};
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>
);
};
export default MovieForm;
// InputField.js
import React from 'react';
const InputField = ({ type, value, placeholder, onChange, errorMessage }) => {
return (
<>
<input
type={type}
value={value}
placeholder={placeholder}
onChange={onChange}
/>
<br />
<div style={{ color: 'red' }}>{errorMessage}</div>
</>
);
};
export default InputField;
코드 줄 수 차이는 별로 없지만 컴포넌트로 사용하면 스타일을 적용한다던가 할 때 한 곳에서만 수정하면 되므로 편리하다. ⇒ 재사용성이 좋다.
'React > Lecture' 카테고리의 다른 글
[Kossie Coder] react router Switch, exact 속성 (0) | 2022.01.14 |
---|---|
[Kossie Coder] react router 설치 (0) | 2022.01.14 |
[Kossie Coder] 폼 입력 안 했을 시 에러문구 표시 (0) | 2022.01.14 |
[Kossie Coder] 영화 삭제하기 - filter를 이용해서 삭제한 id 가 아닌 영화들 return하기 (0) | 2022.01.14 |
[Kossie Coder] 영화 삭제하기 - 현재 시간 id로 저장 (0) | 2022.01.14 |