useInput custom hook

devbit4 [front-end developer]·2023년 7월 31일
0

import { useState } from 'react';

function useInput(validateValue) {
const [enteredValue, setEnteredValue] = useState('');
const [isTouched, setIsTouched] = useState(false);

//이거는 props로 받기
// const valueIsValid = enteredValue.trim() !== '';
const valueIsValid = validateValue(enteredValue);

const hasError = !valueIsValid && isTouched;

const valueInputChangeHandler = (event) => {
setEnteredValue(event.target.value);
};

const valueInputBlurHandler = (event) => {
setIsTouched(true);
};

const reset = () => {
setEnteredValue('');
setIsTouched(false);
};

return {
value: enteredValue,
isValid: valueIsValid,
hasError,
valueInputBlurHandler,
valueInputChangeHandler,
reset,
};
}

export default useInput;

profile
제대로 꾸준하게 / 블로그 이전 => https://dailybit.co.kr

0개의 댓글