React 이메일 유효성 검사

아이디 입력 input 이메일 유효성 검사

올바른 이메일 형식으로 된 아이디를 입력하고, 비밀번호를 8자 이상 입력해야 회원가입 버튼이 클릭 가능하도록 활성화되는 기능을 구현했다.

const [btnDisabled, setBtnDisabled] = useState(true);

<button
  disabled={btnDisabled}
>
회원가입
</button>

button의 disabled의 초기값을 true로 하고, input value가 유효성 검사를 통과하면 false로 바뀌면서 활성화 되게 한다.

  useEffect(() => {
    authBtn();
  }, [signUpForm]);

  const regx = new RegExp(
    /([\w-.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/
  );

  const authBtn = () => {
    regx.test(signUpForm.email) && signUpForm.password.length >= 8
      ? setBtnDisabled(false)
      : setBtnDisabled(true);
  };

정규식을 이용해 이메일 형식이 맞는지 유효성 검사를 진행하고, 비밀번호가 8자 이상인지 확인해 두 가지 조건 모두 만족하면 button의 disabled 값이 false로 바뀌면서 클릭할 수 있게 활성화 된다.
여기서 state는 비동기처리로 인해 입력값이 한 글자씩 늦게 들어온다. 비밀번호를 8글자 입력했을때 바로 button이 활성화 되지 않고 한 번 더 입력해야 바뀐다. useEffect의 의존성 배열에 signUpForm state를 입력해 해당 state 값이 바뀔때마다 값을 받아오도록 한다.