[React] signUp 유효성검사

회원가입 페이지를 만들어보았다.
근데 너무 길다;; 개선할 수 있는 방향이 있을 것 같은데!

const Signup = () => {
  //input
  const [id, setId] = useState('');
  const [password, setPassword] = useState('');
  const [passwordConfirm, setPasswordConfirm] = useState('');
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  //validation
  const [passwordVali, setPasswordVali] = useState(false);
  const [passwordConfirmVali, setPasswordConfirmVali] = useState(false);
  const [mailVali, setMailVali] = useState(false);
  const validation = { 
    mail: /[\w\-.]+@[\w\-.]+/g ,
    password: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}/g 
  };

  const onChangeId = (e) => {
    setId(e.target.value);
  }
  const onChangePassword = (e) => {
    if(validation.password.test(e.target.value)) {
      setPasswordVali(true);
    };
    setPassword(e.target.value);
  };
  const onChangePasswordConfirm = (e) => {
    if(password === e.target.value) {
      setPasswordConfirmVali(true);
    };
    setPasswordConfirm(e.target.value);
  };
  const onChangeName = (e) => {
    setName(e.target.value);
  };
  const onChangeMail = (e) => {
    if(!e.target.value || validation.mail.test(e.target.value)) {
      setMailVali(true);
    };
    setEmail(e.target.value);
  };
  const onSubmit = (e) => {
    e.preventDefault();
    const url = 'http://localhost:8000/auth/signup';
    const payload = {
      email,
      password
    }
    axios.post(url, payload, {
      headers: {
        'Content-Type': 'application/json',
      }
    })
    .then(res => {
      console.log(res.data);
      window.location = '/signin';
    }
    )
    .catch(err => {
      console.log(err);
    })
  };
  
  // 유효성검사 
  // [v] 1. 메일 @ 포함
  // [v] 2. 비밀번호 8자 이상
  // [v] 3. 메일과 비밀번호가 조건을 만족했을때만 버튼 활성화
  return (
    <Wrap>
      <h2>가입하기</h2>
      <SignUpBox onSubmit={onSubmit}>
        <Input 
        id="id" 
        label="아이디" 
        value={id} 
        onChange={onChangeId} 
        type="text" />
        <Input 
        id="password" 
        label="비밀번호" 
        value={password} 
        onChange={onChangePassword} 
        type="password" />
        { !passwordVali && password.length ? <span>비밀번호는 숫자, 영문자를 포함한 8글자 이상이어야 합니다.</span> : null }
        <Input 
        id="passwordConfirm" 
        label="비밀번호 확인" 
        value={passwordConfirm} 
        onChange={onChangePasswordConfirm} 
        type="password" />
        { !passwordConfirmVali && passwordConfirm.length ? <span>비밀번호가 일치하지 않습니다.</span> : null }
        <Input 
        id="name" 
        label="이름" 
        value={name} 
        onChange={onChangeName} 
        type="text" />
        <Input 
        id="email" 
        label="메일" 
        value={email} 
        onChange={onChangeMail} 
        type="email" />
        { !mailVali && email.length ? <span>이메일 형식이 아닙니다.</span> : null }
        <Button
        disabled={passwordVali && passwordConfirmVali && mailVali
        ? false : true}
        >
          가입하기</Button>
      </SignUpBox>
    </Wrap>
  )
}