참고
양식 및 사용자 입력 작업
NOTE
사용자 입력 폼에대해 폼이 어떻게 동작하는지 다루고, 폼 입력 값을 조작하고, 검증하는 것에 대해 다룬다.
검증추가, 피드백 제공
NOTE
<div className={nameInputClasses}>
<label htmlFor="name">Your Name</label>
<input
type="text"
id="name"
onChange={nameChangeHandler}
onBlur={nameBlurHandler}
value={enteredName}
/>
{nameInputHasError && (
<p className="error-text">Name Must not be empty</p>
)}
</div>
JavaScript
복사
(value) => value.trim() !== "" // 빈칸여부를 확인하는 로직
(value) => value.includes("@") // 이메일 @여부 확인 로직
JavaScript
복사
onFocus
•
엘리먼트가 포커스 될 때 호출된다.
•
ex) text input을 클릭했을 때 호출됨
onBlur
•
엘리먼트에서 포커스가 사라졌을 떄 호출된다.
•
ex) 유저가 포커스된 text input의 바깥 영역을 클릭했을 때 호출됨.
사용자 지정 입력 Hook 추가
NOTE
const useInput = (validateValue) => {
const [enteredValue, setEnteredValue] = useState("");
const [isTouched, setIsTouched] = useState(false);
const valueIsValid = validateValue(enteredValue);
const hasError = !valueIsValid && isTouched;
const valueChangeHandler = (event) => {
setEnteredValue(event.target.value);
};
const inputBlurHandler = (event) => {
setIsTouched(true);
};
const reset = () => {
setEnteredValue("");
setIsTouched(false);
};
return {
value: enteredValue,
isValid: valueIsValid,
hasError,
valueChangeHandler,
inputBlurHandler,
reset,
};
};
export default useInput;
JavaScript
복사
사용자 정의 훅
import useInput from "../hooks/use-input";
const SimpleInput = (props) => {
const {
value: enteredName,
isValid: enteredNameIsValid,
hasError: nameInputHasError,
valueChangeHandler: nameChangeHandler,
inputBlurHandler: nameBlurHandler,
reset: resetNameInput,
} = useInput((value) => value.trim() !== "");
const {
value: enteredEmail,
isValid: enteredEmailIsValid,
hasError: emailInputHasError,
valueChangeHandler: emailChangeHandler,
inputBlurHandler: emailBlurHandler,
reset: resetEmailInput,
} = useInput((value) => value.includes("@"));
let formIsvalid = false;
if (enteredNameIsValid && enteredEmailIsValid) {
formIsvalid = true;
}
const formSubmitHandler = (event) => {
event.preventDefault();
nameBlurHandler(true);
emailBlurHandler(true);
if (!enteredNameIsValid && !enteredEmailIsValid) {
return;
}
resetNameInput();
resetEmailInput();
};
const nameInputClasses = nameInputHasError
? "form-control invalid"
: "form-control";
const emailInputtClasses = emailInputHasError
? "form-control invalid"
: "form-control";
return (
<form onSubmit={formSubmitHandler}>
<div className={nameInputClasses}>
<label htmlFor="name">Your Name</label>
<input
type="text"
id="name"
onChange={nameChangeHandler}
onBlur={nameBlurHandler}
value={enteredName}
/>
{nameInputHasError && (
<p className="error-text">Name Must not be empty</p>
)}
</div>
<div className={emailInputtClasses}>
<label htmlFor="name">Your Email</label>
<input
type="email"
id="email"
onChange={emailChangeHandler}
onBlur={emailBlurHandler}
value={enteredEmail}
/>
{emailInputHasError && (
<p className="error-text">Email Must not be empty</p>
)}
</div>
<div className="form-actions">
<button disabled={!formIsvalid}>Submit</button>
</div>
</form>
);
};
export default SimpleInput;
Java
복사
전체 코드
•
검증, 변화로직, 포커스관련 로직을 모두 사용자 입력에 넣어줌
•
매개변수로는 검증 함수를 받아서 유연하게 대응해준다.