React)Login 창 구현하기

드디어 ... 난 너무 너무 너무 너무 ..휴

자바스크립트로 로그인창을 disabled로 구현했었음.

const password=document.querySelector('#inputid');
const usermail=document.querySelector('#inputpw');
const loginbar=document.querySelector('#login');
loginbar.disabled='true';

password.addEventListener('input', activelogin);
usermail.addEventListener('input', activelogin);
    
function activelogin() {
    (!password.value  || !usermail.value) ? loginbar.disabled=true :  loginbar.disabled=false;
}
    

이렇게 쿼리셀렉터로 id,pw, login을 가져왔고 로그인바에는 disabled를 디폴트로 주었다.
이벤트리스터로 input이 ㄷ르어오면 activelogin함수가 발동.
함수는 삼항연산자로 구현.
근데 이게 react에서 연결이 안돼.....

문제는 id,pw의 value를 저장한 state를 엌떻게 연결해줘야 할지 몰랐음.

function LoginChungkyu() {
  const [activeid, setActiveid] = useState();

  const handleIdinPut = event => {
    setActiveid(event.target.value);
  };

  const [activepw, setActivepw] = useState();

  const handleIdinPw = event => {
    setActivepw(event.target.value);
  };

  const [button, setButton] = useState(true);
  console.log('start', button);

  const changeColor = () => {
    if (activeid.length > 5 && activepw.length > 5) {
      setButton(false);
    } else {
      setButton(true);
    }
  };
  console.log('end', button);
  

• ID < input> 에서 onChange event 발생
• event 발생 시 handleIdInput 함수 실행
• handleIdInput 는 이벤트를 인자로 받음
• event가 일어난 요소에 담긴 value 값 (event.target.value)을 state에 저장

일단 이걸 따라갔다.

handleIdinPut에 이벤트를 인자로 받고 event.target.value를 state에 저장했다.
(setActiveid로 받아 변경)

pw에도 동일하게 작업.

<input
              id="inputid"
              type="text"
              placeholder="전화번호, 사용자 이름 또는 이메일"
              onChange={handleIdinPut}
              onKeyup={changeColor}
            />
            <input
              id="inputpw"
              type="text"
              placeholder="비밀번호"
              onChange={handleIdinPw}
              onKeyUp={changeColor}
            />
          </div>
          <div className="button-wrap">
            <Link to="/Main-chungkyu">
              {' '}
              <button disabled={button ? true : false}> 로그인</button>
            </Link>

이렇게 onChange로 전달까지 했다.

그러나

const changeColor = () => {
    if (activeid.length > 5 && activepw.length > 5) {
      setButton(false);
    } else {
      setButton(true);
    }
  };

요부분을 만들긴했는데.. 어디다 어케 연결해야 하는지 몰랐다.

내가 해본 방법은
그냥 changecolor를 버튼에 그냥 전달하기
함수자체를 버튼 자리에 넣어보기
useEffect써보기 (근데 더 어렵게 느껴져 일단 보류)
등...

disabled에 삼항연산자를 걸어주는 것 확실하다고 생각했다.
근데 천천히 보니 애써 만든 id,pw를 저장한 state와 어떻게든 연결을 시켜줘야 활성 비활성이 될 것 같은데 모르겠었다.

---->
onKeyup에 조건이 걸린 함수를 넣어 여부에 따라 button을 setButton으로 state상태를 조절한다.

로그인버튼에 disabled로 참 거짓을 판단하고 이에 따른scss로 변경..

사실 아직 정확히는 모르겠다..
가이드의 도움도 있었다. 근데 진짜 계속 보니까 이제 그냥 코드가 적힌 모니터 보는게 익숙해 지긴했다.. 눈과 마음이 편해졌달까..