React | useState 이해하기 🤯😭

로그인 버튼 활성화 시키기 ^^

function OhjLogin(props) {
  const navigate = useNavigate();

  const [idState, setIdState] = useState('');
  const [pwState, setPwState] = useState('');
  const [active, setActive] = useState(false);

  // 로긴버튼을 누르면 메인페이지로 넘어가는 함수
  const goToMain = () => {
    if (activeLogin) {
      navigate('/OhjMain');
    } else {
      alert('아이디와 비밀번호를 제대로 입력해주세요.');
    }
  };
  
  const activeLogin = () => {
    return idState.includes('@') && pwState.length >= 5
      ? setActive(true)
      : setActive(false);
  };

  function saveUserId(e) {
    setIdState(e.target.value);
    activeLogin();
  }

  function saveUserPw(e) {
    setPwState(e.target.value);
    activeLogin();
  }

  return (
    <div>
      <section id="login_page">
        <div id="login_logo">
          <Link to="/OhjMain">
            <span>Westagram</span>
          </Link>
        </div>
        <div id="id_pw_window">
          <input
            name="identy"
            className="id"
            type="text"
            value={idState}
            placeholder="전화번호, 사용자 이름 또는 이메일"
            onChange={saveUserId}
          />
          <input
            name="password"
            className="pw"
            type="password"
            value={pwState}
            placeholder="비밀번호"
            onChange={saveUserPw}
          />
          <button
            type="button"
            className="login_btn"
            onClick={goToMain}
            disabled={active ? false : true}
          >
            로그인
          </button>
        </div>
        <a className="forget_pw" href="#">
          비밀번호를 잊으셨나요?
        </a>
      </section>
    </div>
  );
}

리액뚜 너무 어렵다 으아아아아아앙ㅇㅇ앙아앙
자 하나하나 뜯어서 정리해보자
내 힘으로 설명할수 있게되다니 감사
그러나 혼자 코드는 못짤것같다 아직
마크 저커버그 밉다 .

============================================================

const navigate = useNavigate();

const [idState, setIdState] = useState('');
const [pwState, setPwState] = useState('');

idState 는 id Input value 값을 가리킨다.
그러려면 id Input태그에 value 값을 idState 로 지정해줘야,
idState 값이 id Input value 를 가리키는지 안다. (이것조차 몰라서 어려웠음😂)

idState의 (초기값은 '' <- 빈값이다 = id Input 창에 뭘 치기전엔 아무것도 없으니까)
setIdState 는 idState 값을 실시간 변경해준다 (useState의 원리..🤓)
= setIdState 가 받는 값은 족족 idState로 들어간다
(pwState도 동일한 로직.)

setIdState 값에는 계속 변경될 id Input value(e.target.value)가 들어간다. 👇🏻
(Input 태그에 onChange 이벤트로 saveUserId 함수를 넣어놨음)

function saveUserId(e) {
    setIdState(e.target.value);
    activeLogin();
  }

*onChange 이벤트 기능: 해당 타겟 태그에서 일어나는 모든 일들을 감지 (= 변경될때마다 발생)]

const [active, setActive] = useState(false);

active의 초기값은 false.
이 useState(setActive) 는 로그인버튼의 disabled 에 쓰일 것이다.

const activeLogin = () => {
    return idState.includes('@') && pwState.length >= 5
      ? setActive(true)
      : setActive(false);
  };

activeLogin 함수를 만들어, 실시간 들어오는 idState, pwState 에 조건문을 걸어주고 setActive 의 값을 정해준다 (삼항연산자 사용)

function saveUserId(e) {
    setIdState(e.target.value);
    activeLogin();
  }

그래서 태그에 onChange로 걸어준 saveUserId 함수를 사용하여,
setIdState를 통해 들어오는 idState 값을 받고,
activeLogin 함수를 실행하여 조건을 검사한다.
=> 인풋태그에 의해 로그인버튼 활성화가 일어나는 것이기 때문!!!

<button
        type="button"
        className="login_btn"
        onClick={goToMain}
        disabled={active ? false : true}
          >
            로그인
</button>

그래서 setActive 를 통해 active 로 들어오는 값이
true 면 false 로, false 면 true 로 !!!
버튼의 disabled 속성을 설정해주는 것이다.

이렇게... useState 를 사용한 코드설명 및 정리 끝 ㅠㅠ