유효성 검사과 useState 렌더링 시점.

  // 유효성검사 state
  const [isValid, setIsValid] = useState({
    email: true,
    password: true,
  });
  // input 값 value 저장
  const [form, setForm] = useState({
    email: '',
    password: '',
  });
  
  // email 정규식, password 정규식
//LoginValidation.js

export default function useLoginValid(form, setIsValid) {
  const emailRegex =
    /([\w-.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
  // 비밀번호 8자 이상, 최소한 하나의 문자열, 최소한 하나의 숫자
  const passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;

  const emailIsValid = form.email && emailRegex.test(form.email);
  const passwordIsValid = form.password && passwordRegex.test(form.password);

  setIsValid({
    email: emailIsValid,
    password: passwordIsValid,
  });
}

문제발생

 비밀번호만 유효성 검사에 알맞지 않 게 작성후  로그인 버튼을 누르면 유효성 검사에 막히지 않고 post 요청이 전송되는 버그가 있었습니다. 

8글자 미만으로 비밀번호를 입력해도 signin 요청이 실행되는 모습

처음 설계한 유효성 검사로직은 다음과 같습니다.  1.사용자가 이메일과 비밀번호를 누른다. 2. 그 이후 로그인 버튼을 누르면  유효성검사가  실행된다. 3. 유효성검사에 통과하면 post 요청을 보내고 통과하지못하면 함 post 요청을 보내지 않고 함수에서 빠져나온다. 

  // 로그인 버튼 클릭시 실행되는 함수
  const handleSubmit = (e) => {
    e.preventDefault();
    // 유효성 검사 로직
    useLoginValid(form, setIsValid); //useSate 변화감지는 미래에 이루어진다.
    if (isValid.email && isValid.password) {
      //뭘하건 현재 값이 들어가니까
      fetch(`${BASE_URL}auth/signin`, {
        method: 'POST',
        credentials: 'include',
        headers: {
          'Content-Type': 'application/json',
          // 'ngrok-skip-browser-warning': 'true',
        },
        body: JSON.stringify(form),
      })
        .then((data) => {
          if (data.status === 200) {
            console.log(data.headers.get('Authorization'));

            localStorage.setItem(
              'accessToken',
              data.headers.get('Authorization')
            );
            localStorage.setItem('UserId', data.headers.get('UserId'));
            //localStorage.setItem('refreshToken', data.headers.get.Refesh);
            // Refresh accessToken 만료
            //UserId
            //Name

            dispatch(
              userinfoLogin({
                UserId: data.headers.get('UserId'),
                accessToken: data.headers.get('Authorization'),
              })
            );

            //사용자 정보 조회
            handleUserInfo(data.headers.get('UserId'));
            // 전역상태관리 로그인으로 변경
            dispatch(login(() => login()));
            navigate('/');
          } else {
            console.log('요청이 실패했습니다.');
          }
        })
        .catch((err) => {
          console.log(err);
          navigate('/error');
        });
    }
  };

  // 유효성검사 state
  const [isValid, setIsValid] = useState({
    email: true,
    password: true,
  });
  // input 값 value 저장
  const [form, setForm] = useState({
    email: '',
    password: '',
  });
  
  // email 정규식, password 정규식
//LoginValidation.js

export default function useLoginValid(form, setIsValid) {
  const emailRegex =
    /([\w-.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
  // 비밀번호 8자 이상, 최소한 하나의 문자열, 최소한 하나의 숫자
  const passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;

  const emailIsValid = form.email && emailRegex.test(form.email);
  const passwordIsValid = form.password && passwordRegex.test(form.password);

  setIsValid({
    email: emailIsValid,
    password: passwordIsValid,
  });
}

"리액트 성능최적화를 위해 리렌더링을 트리거하는   상태 변화함수를 16ms 마다 한번에 모아서 적용시키는 batch 를 실행하기 때문에 setState 의 상태 변화는 당장 적용되는 게 아니라 미래에 이루어지기 때문에 로그인버튼을 클릭하자마자 유효성검사를 하는 것이 바람직하지 않음 -유길종님"
"비밀번호를 다 작성하고 키보드에서 손뗀 다음 최신으로 상태가 업데이트된 시점에서 서브밋하므로  사용자가 인풋창을 작성할때마다 유효성검사를 하는 것이 바람직함 -유길종님"