2개월 전과 로그인로직 코드비교

두 달전에 했던 위스타그램 클론코딩을 최근에 타입스크립트로 옮겨보았다..

조금 뭔가 예전에 짰던 로직들은 난잡하게 느껴졌다. 조금 더 간결하게 수정할 수 있을 것 같아 한번 수정해보고 비교해보았다.

두 달 전의 코드

 	const [loginValue, setLoginValue] = useState("");
    const [pwValue, setPwValue] = useState("");
    const [loginAllow, setLoginAllow] = useState("");

    const navigate = useNavigate();

    function idValueChange(event){
        setLoginValue(event.target.value);
        if(loginValue.includes('@') && pwValue.length >4){
          setLoginAllow('loginbtnallow')
    }
  }

    function pwValueChange(event){
        setPwValue(event.target.value);
        if(loginValue.includes('@') && pwValue.length >4){
          setLoginAllow('loginbtnallow')
    }
  }

    function onSubmit(event){
      event.preventDefault();
       if(loginValue.includes('@') && pwValue.length >4){
        navigate('/main')
       }
    }

우선 input에 아이디와 패스워드를 받아 특정 조건을 만족하면 메인페이지로 이동할 수 있게 만드는 기능이었다.

아이디와 패스워드를 각각 관리하는 state와 그게 유효한지 검사하는 state가 각각 존재한다.

이해할 수 없는 로직들도 있다..loginAllow라는 변수는 왜 만들었는지도 모르겠다..
boolean값으로 저장하지 않는 이유도 모르겠고,, ㅋㅋㅋㅋ

두 달이 지난 지금은 다음과 같이 작성했다.

  const [userInfoValue, setUserInfoValue] = useState<UserInfo>({
      email: "",
      pw: "",
    });

  const emailRegex =
    /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/;

  const passwordRegex =
    /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/;

  const navigate = useNavigate();

  function userInfoChange(event: React.ChangeEvent<HTMLInputElement>) {
    const { name, value } = event.target;
    setUserInfoValue({
      ...userInfoValue,
      [name]: value,
    });
  }

  const submitLoginForm = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (
      emailRegex.test(userInfoValue.email) &&
      passwordRegex.test(userInfoValue.pw)
    ) {
      navigate("/main");
    } else {
      alert("이메일 비밀번호를 다시 확인해주세요");
    }
  };

이전과 달라진 점은 아이디와 패스워드를 각각 관리하지 않고 객체안에 각각의 값들을 한 번에 관리하는 법을 그동안 익힌점?

각각의 input창에 name을 지정해준 후 name의 이름으로 값을 저장할 수 있는 점
(이걸로 아이디를 입력하는 함수, 패스워드를 입력하는 함수를 각각 받지 않고 한 함수로 입력할 수 있게 되었다.)

특히 최근에 안 사실인데

 	setUserInfoValue({
      ...userInfoValue,
      [name]: value,
    });

객체 안에 키값을 대괄호로 묶어주는 이유를 모르고 사용해왔다.. ㅋㅋㅋㅋ...
객체의 키값을 동적으로 사용할 때는 위와 같이 사용한다고 한다.

그래서 input의 name을 각각 email, pw로 설정해두고 저런 이벤트를 부여하면
값이 email과 pw로 잘 저장이 되었던 것이다...

물론 지금 작성한 것이 다 정답이라고 생각은 하지않지만 두 달간 두개의 프로젝트를 거치면서 많은 변화가 있었것 같긴하다..
그 두달동안 시간투자를 한 만큼 많이 성장을 한 것 같기도 하다