setState 함수 호출 이후에 상태값을 바로 사용못함

이미 json server에 있는 유저정보라, 가입이 불가능한 입력값인 데도 페이지가 넘어가는 문제가 생겼다

이미 존재하는 이메일 비번 입력하면 에러메세지가 변경되어야 하는데, 변경안되고 초기 상태로 있는게 문제였다.
Navigate를 안넣으면, 에러메세지는 변경되고 페이지는 안넘어간다.
Navigate 를 넣으면, 에러메세지 변경 안되고 페이지는 넘어간다.

이유는 에러메세지 변경은 state로 관리하기 때문에, 비동기적으로 실행된다.
즉, Navigate보다 에러메세지 변경이 늦게 실행된다. 그래서 바로 클릭을 누르자마자 (에러메세지 변경없이) 페이지가 넘어가는 것이었다

고민을 많이 했는데 팀원분이 같이 고민해서 해결을 해주셨다 !! (짝짝)

 

 

---

해결 ==> 진솔님!

useState훅으로 변경되는 값들은 비동기적으로 이루어져서 지은님이 말씀하신것처럼 useEffect를 사용해야했어요!
그런데 에러메세지들이 초기값이 빈 문자열이다보니까 처음에 
useEffect 함수로 이렇게 하면 처음 화면 랜더링될때 바로 navigate가 되더라구요

useEffect(()=>{
    if(에러메세지들이 빈값일때){
      navigate('/');
    }
  },[nameErrorMessage,emailErrorMessage])

 

그래서 유효성 검사 상태를 boolean 값으로줘서 실행시키게 했더니 됐어요! 

 

const SignupInput = () => {
  const navigate = useNavigate();
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [nameErrorMessage, setNameErrorMessage] = useState('');
  const [emailErrorMessage, setEmailErrorMessage] = useState('');
  const [pwErrorMessage, setPwlErrorMessage] = useState('');
  const [isEmailValid, setIsEmailVaild] = useState(false); //유효한지 불린상태 추가
  const [isNameValid, setIsNameVaild] = useState(false);  //유효한지 불린상태 추가
  
  
  const handlePwChange = (e) => {
    const value = e.target.value;
    setPassword(value);
  };

  const handleEmailChange = (e) => {
    const value = e.target.value;
    setEmail(value);
  };

  const handleNameChange = (e) => {
    const value = e.target.value;
    setName(value);
  };

  useEffect(()=>{
    if(isEmailValid&&isNameValid){
      navigate('/');
    }
  },[nameErrorMessage,emailErrorMessage])
  
  
  const signup = async () => {
    //2차 검사: 이미 존재하는 가입정보인지
    try {
      const response = await axios.get('http://localhost:3000/user');
      const { data } = response;
      const duplicateUserEmail = data.filter((item) => item.email === email);
      const duplicateUserName = data.filter((item) => item.name === name);

      if (duplicateUserEmail.length === 0) { //일치하는 데이터 값 없으니 통과
        setIsEmailVaild(true);
        } else {
          setEmailErrorMessage('이미 가입한 이메일입니다');
      }
      if (duplicateUserName.length === 0) { //일치하는 데이터 값 없어서 통과
        setIsNameVaild(true);
      } else {
        setNameErrorMessage('이미 존재하는 이름입니다');
      }
    } catch (error) {
      console.log(`${error} 데이터를 가져오는데 문제가 발생했어요`);
    }
  };