[React] 유효성 검사하는 input hook 만들기

useInput이라고들 부르는 훅을 만들었다.
코드스테이츠에서 배운것 + 노마드코더 강의로 본것 짬뽕해서 나름 만들어 보았다.

초기 useInput 코드

import { useState } from 'react';

const useInput = (init, validation) => {
  const [value, setValue] = useState(init);
  const [alert, setAlert] = useState(false);
  const onChange = (event) => {
    let passValidation = true;
    if (typeof validation === 'function') {
      setAlert(true);
      passValidation = validation(event.target.value);
    };
    if(!event.target.value) {
      setAlert(false);
    }
    if(passValidation) {
      setValue(event.target.value);
      setAlert(false);
    } else {
      setValue('');
      setAlert(true);
    }
  };
  const reset = () => {
    setValue(init);
  }
  return [value, onChange, alert, reset];
};

export default useInput;

수정후 useInput

import { useState } from 'react';

const useInput = (init, validation) => {
  const [value, setValue] = useState(init);
  const [alert, setAlert] = useState(true);
  const onChange = (event) => {
    let passValidation = true;
    if (typeof validation === 'function') {
      passValidation = validation(event.target.value);
    };
    if(passValidation) {
      setAlert(false);
    } else {
      setAlert(true);
    }
    setValue(event.target.value);
  };
  const reset = () => {
    setValue(init);
  }
  return [value, onChange, alert, reset];
};

export default useInput;

아니 강의 따라서 했을때는 분명히 잘 됐는데!?
거기다 처음 로그인/가입 페이지 만들때는 작동이 잘 됐다.
근데 input 내 value가 입력이 안되는것이다 갑자기...;
useInput 말고도 common 요소로 Input을 스타일링해서 사용중이었는데, 이 Input에서 value를 props로 받고있지 않았다.
그래서 추가했더니 안됨... 엥?
여튼간 이상한건 맞았다는 소리. 음. 전엔 왜 된거지?
그래서 useInput을 고쳐야겠다고 생각했다.

보니까 validation을 통과해야 value가 세팅되는 코드였다...
비밀번호같은경우는 8글자를 넘겨야하는데 처음 입력하면 1글자부터 시작할수밖에 없으니까 validation을 통과하려면 다른데서 복사해서 붙여넣지 않는한 영원히 통과할 수가 없는 상태였던 것....;;;;

노마드코더 강의를 보고 정리한 내용을 다시 보니, validation이 10글자 이하여야한다 뭐 그런거였다.
ah,,,, ha,,,! 🤗
그래서 나는 validation 통과여부에 따라 alert을 주는것만 하고, value 자체는 그때그때 셋팅될 수 있도록 setValue를 if문 바깥으로 꺼내주었다.

input value가 validation 통과해야만 제출버튼이 활성화되도록 되어있으니 이정도만 해도 충분하다!