[React] 유효성 검사 시점 차이

시점 차로 인해 유효성 검사가 제대로 실행되지 않는 오류가 발생했다.

• 수정 전

 const handlePwChange = (e) => {
    setUserPassword(e.target.value);
    const regex =
      /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,16}$/;
    if (regex.test(userPassword)) {
      setUserPasswordValid(true);
    } else {
      setUserPasswordValid(false);
    }
  };

• 수정한 코드

  - useState는 비동기적으로 상태값을 업데이트하기 때문에 상태값을 직접 사용하지 말고, 이전 상태값에 기반하여 업데이트하는 함수를 사용해야 한다.

const handlePwChange = (e) => {
    const password = e.target.value;
    setUserPassword(password);
    const regex =
      /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,16}$/;
    if (regex.test(password)) {
      setUserPasswordValid(true);
    } else {
      setUserPasswordValid(false);
    }
  };