이제 유효성 검사 해야함 ㅎㅎㅎㅎ

useInput 코드

  const useInput = (initialValues) => {
    const [values, setValues] = useState(initialValues);
    const onChange = (event) => {
      const { name, value } = event.target;
      setValues({ ...values, [name]: value });
    };
    const onReset = () => setValues(initialValues);
    return [values, onChange, onReset];
  };

1. 빈값 체크하기

✔ 한꺼번에 체크하기.

• Object.values(obj)
• Array.inclues(찾고싶은 값 ) 사용하기

Object.values()

Object.values() 메소드는 전달된 파라미터 객체가 가지는 (열거 가능한) 속성의 값들로 이루어진 배열을 리턴한다.

const object1 = {
  a: '에이',
  b: "비",
  c: "씨"
};
console.log(Object.values(object1));
//Array ["에이", "비", "씨"]

Array.prototype.includes()

includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별한다.
return 값은 Boolean

const pets = ['cat', 'dog', 'bat'];
console.log(pets.inclues('cat')) // true

OnValidator 함수 만들기

 const onValidator = (data) => {
    const values = Object.values(data);
    const validatorEmpty = values.includes("");
    validatorEmpty ? alert("빈칸을 모두 입력하세요") : onReset();
  };
  const handleSubmit = (event) => {
    event.preventDefault();
    onUpdate(data);
    onValidator(data);
  };
{...생략}
<button onClick=(handleSubmit)></button>

✔ 하나씩 체크하기(feat.노가다)

  const onValidator = (data) => {
    const { userId, age, gender, phone, email, address } = data;
    if (userId === "") alert("이름을 입력해주세요");
    if (age === "") alert("나이를 입력해주세요");
    if (gender === "") alert("성별을 입력해주세요");
    if (phone === "") alert("핸드폰번호를 입력해주세요");
    if (email === "") alert("이메일을 입력해주세요");
    if (address === "") alert("주소를 입력해주세요");
    return onReset();
  };
  const handleSubmit = (event) => {
    event.preventDefault();
    onUpdate(data);
    onValidator(data);
  };

오류남...

이렇게 하나씩 계속 타고나가서 엉망이 됨^^
해결책으로 찾은 useForm
다음편에 사용해보기!