[React] useState 한 박자 느리게 찍히는 문제 (비동기)

이번 주차에 클론코딩을 진행하게 되었는데 오늘은 회원가입 페이지를 만들게 되었다.

 

아이디 및 비밀번호에 정규식도 넣고 나름 요즘 인터넷 회원가입처럼 만들고 싶었다.

 

그래서 아이디 비밀번호 등 모든 조건이 부합해야만 로그인 버튼이 활성화 되도록 삼항 연산자를 만들었다.

 

삼항 연산자에는 모든 조건이 부합한다면 이라는 조건을 넣었다.

 

그 모든 조건이 부합하면 이라는 판별은 onChange로 이벤트 발생시 조건이 맞다면 true가 되는 형식이였다.

 

그런데 조건이 부합하여도 한박자 느리게 판별식이 true로 바뀌는 현상이 있었다.

 

인터넷을 찾아보니 문제는 useState의 비동기 처리로 인한 문제였다.

 

이를 해결 하기 위해선 useEffect를 사용하여 state가 변할 때 마다 함수가 실행되도록 해야만 했다.

 

기존 코드를 살펴보자

const onChangeUserHandler = (e) => {
    const { name, value } = e.target;
    setUser({ ...user, [name]: value });

    if (name === "email") {
      !regEmail.test(value)
        ? setEmailInput("이메일 형식으로 입력해 주세요!")
        : setEmailInput("good");
    }
    if (name === "password") {
      !regPassword.test(value)
        ? setPassInput(`8~16자의 영문 대소문자와 숫자로 입력해주세요.
      특수문자(!@#$%^&*)도 사용 가능합니다.`)
        : setPassInput("good");
    }
    if (name === "nickname") {
      !regNickname.test(value)
        ? setNicknameInput("닉네임은 2-6자의 한글만 입력 가능합니다.")
        : setNicknameInput("good");
    }
    if (name === "passwordCheck") {
      password !== value
        ? setPassCheckInput("비밀번호가 불일치 합니다.")
        : setPassCheckInput("good");
    }
    console.log(registerOk);
   
    if (
      regEmail.test(email) &&
      regPassword.test(password) &&
      regNickname.test(nickname) &&
      password === passwordCheck
    ) {
      return setRegisterOk(true);
    } else {
      return setRegisterOk(false);
    }
  };
  
 //여기서 setRegister가 true에서 false로 바뀔때나 false에서 true로 바뀌는게 한박자 느렸다.

위 코드의 마지막 주석처럼 한박자 느린 현상이 발생하였다.

 

그럼 다음으로 수정된 코드를 보자.

useEffect(() => {
    if (
      regEmail.test(email) &&
      regPassword.test(password) &&
      regNickname.test(nickname) &&
      password === passwordCheck
    ) {
      return setRegisterOk(true);
    } else {
      return setRegisterOk(false);
    }
  }, [user]);
  
  //기존 코드에서 if문을 onChangeHandler함수에서 빼내고 useEffect안으로 넣었다.

기존 코드에서 판별조건문을 밖으로 빼내고 useEffect 훅에 넣고 dependency로 user스테이트를 넣어 즉각적으로 반응하도록 수정하였다.

 

이걸 보면서 내가 기초가 많이 부족하다는걸 새삼 또 알게되었고, 비동기처리에 대한 무지함이 아직도 많다는 것을 느꼈다.