[React] Login Page Refactoring

기존에 useState Hook 을 써서 구현했던 로그인 id & password 유효성 검사, 사용자 입력 데이터 저장 및 로그인 버튼 활성화 기능 리팩토링

👇🏻👇🏻👇🏻 기존 코드 👇🏻👇🏻👇🏻

function Login() {
  const [inputId, SetInputId] = useState(false);
  const [inputPassword, SetInputPassword] = useState(false);

  const navigate = useNavigate();
  const goToMain = () => {
    navigate("/Main");
  };

          <input
            type="text"
            className="loginId"
            placeholder="전화번호, 사용자 이름 또는 이메일"
            onChange={(e) => SetInputId(e.target.value.includes("@"))}
          />
          <input
            type="password"
            className="loginPassword"
            placeholder="비밀번호"
            onChange={(e) => SetInputPassword(e.target.value.length > 5)}
          />
          <button
            className="loginBtn"
            disabled={!inputId || !inputPassword}
            onClick={goToMain}
           />

수정 ‼️

• 불필요한 useState hook 지양
  => 기존에 id input 과 password input 을 각각 따로 useState 를 썼지만, 객체로 담아 useState hook 한번만 사용
• Inline 함수 지양
  => 기존에 button 태그 안에 이벤트를 함수를 적었지만, 따로 변수로 조건을 지정해서 사용

function Login() {
  const [values, setValues] = useState({ Id: ' ', Password: ' ' });
  const handleBtn = !(values.Id.includes('@') && values.Password.length > 4);

  const handleInput = e => {
    const { name, value } = e.target;
    setValues({ ...values, [name]: value });
  };

  const navigate = useNavigate();
  const goToMain = () => {
    navigate('/Main-hyelinPark');
  };

  return (
    <div className="Login">
      <div className="loginBox">
        <p className="logo">Westagram</p>
        <form className="inputBox">
          <input
            type="text"
            name="Id"
            value={values.Id}
            className="loginId"
            placeholder="전화번호, 사용자 이름 또는 이메일"
            onChange={handleInput}
          />
          <input
            type="password"
            name="Password"
            value={values.Password}
            className="loginPassword"
            placeholder="비밀번호"
            onChange={handleInput}
          />
          <button className="loginBtn" onClick={goToMain} disabled={handleBtn}>
            로그인
          </button>
  

🔹useEffect() 사용하기

• useEffect() hook 은 side effect 를 처리하기 위해 사용하는 함수.
• useState() hook 을 사용할 때는 state 가 변할 때마다 re-rendering 된다. 하지만 useEffect 는 input 에 변화가 일어났을 때만 re-rendering 된다.
• useEffect (handleBtn, [values.Id, values.Password])
  => [values.id, values.Password] 가 변하면 handleBtn 함수를 실행시켜라

useEffect () 사용해서 코드를 다시 짰을 때

function Login() {
  const [values, setValues] = useState({ Id: "", Password: "" });
  const [activeBtn, setActiveBtn] = useState(false);
  
  useEffect(() => {
    const handleBtn = !(values.Id.includes("@") && values.Password.length > 4);
    const handleBtn = !(values.Id.includes("@") && values.Password.length > 4);
    setActiveBtn(handleBtn);
  }, [values.Id, values.Password]);

⁉️ 궁금한 점은 다음주에 물어봐야겠다...