[React] button 비활성화

아래 함수를 구현 하기 전까지의 문제점)
1. input란에 키를 하나 입력할때마다 Input칸에서 나가짐.
2. input id>=3 && pw>=3 의 조건을 충족하려면 총 7개의 input을 입력했어야 조건이 충족됐었음

위 문제점들 해결 방법)
1. useState, onChange, handleSubmit 함수들을 LoginGeumGwan 함수 밖에 선언해서 일어났던 문제였음
2. return안에 조건문을 쓰면 해결 됨

한줄 요약:

코드를 어디에 포함시켜야하는지 항상 생각하고 주의하자

function LoginGeumGwan() {
  const navigate = useNavigate();
  const goToMain = () => {
    navigate('/main-geumgwan');
  };
 
  function Main() {
    const [person, setPerson] = useState({
      text: '',
      pw: '',
    });

    const onChange = e => {
      setPerson({ ...person, [e.target.name]: e.target.value });
    };
    const handleSubmit = event => {
      event.preventDefault();
    };

    return (
      <main>
        <form onSubmit={handleSubmit} onChange={onChange}>
          <div>
            <input
              className="inputlogin"
              type="text"
              name="text"
              value={person.text}
              placeholder="전화번호, 사용자 이름 또는 이메일"
            />
          </div>
          <div>
            <input
              type="pw"
              name="pw"
              value={person.pw}
              placeholder="비밀번호"
              className="inputlogin"
            />
          </div>
          <div className="buttonarea">
            <button
              disabled={!(person.text.length >= 3 && person.pw.length >= 3)}
              onClick={goToMain}
            >
              로그인
            </button>
          </div>
        </form>
      </main>
    );
  }
  

여러 개의 input의 onChange 한 번에 관리하기