실습 controlled input 유효성 검사 구현하기

로그인 유효성 검사
1. id, password 제한
2. 입력값 없을 시 버튼 비활성화

const [ID, setID] = React.useState('');
const [passWord, setpassWord] = React.useState('');
const btn = React.useRef(null);
const inputPass = React.useRef(null);
const inputID = React.useRef(null);

// console.log(idCheck);

const handleClick = () => {
  console.log(ID, passWord)

  if(ID.length <= 6 || ID.length >= 20){
    alert('유효하지 않는 id 입니다!');
    setID(' ')
    inputID.current.focus();
   

  } else if(passWord.length <= 12 || passWord.length >= 20){
    alert('유효하지 않는 password입니다!');
    setpassWord(' ')
    inputPass.current.focus();

  } else { alert("회원가입 성공 입니다. ")  }
 }
return (
<div>
<div>
<input
type="text"
name='id'
ref={inputID}
onChange={(e)=>{setID(e.target.value)}}
placeholder='6글자 이상 20글자 이하'
/>
{(String(ID).length <= 6 || String(ID).length >= 20) && '유효하지 않는 id' }
</div>
<div>
<input
type="text"
name='password'
ref={inputPass}
placeholder='12글자 이상 20글자 이하' 
onChange={(e)=>{setpassWord(e.target.value)}}
/>
{(String(passWord).length <= 12 || String(passWord).length >= 20) && '유효하지 않는 pw'}
</div>
<button  type="button" ref={btn} disabled={!(ID&&passWord)} onClick={handleClick}>회원가입</button>
</div>
); 
}