useState 비동기 문제 - useEffect로 해결하기 + Email Format/Validation Check 코드

input으로 이메일 입력 받고 check 버튼을 눌러서 형식 체크를 하려는게 내가 짜려는 코드의 목적이었다. 

그런데 자꾸 버튼을 누르면 첫번째 클릭은 무시되고 두번째 부터 정상적으로 작동하는 문제가 있었다. 

 

왜 그런지 콘솔창에 찍어보니, 입력값이 들어올때마다 useState로 넣어놓고 있었는데 이게 원래의 입력값보다 한박자씩 늦게 useState 변수에 들어가면서 자연스럽게 이메일 형식 체크 이벤트도 하나씩 늦는 것이었다.

 

그 전에도 버튼 click 이벤트 등을 통해 useState 값을 변경하고 반영하는 코드가 있으면 항상 클릭 한번씩 반응이 느리곤 했었는데 그 이유를 알아냈다.

 

바로 useState의 비동기 문제 때문이었다.

 

useState를 통한 변수 상태 변경은 비동기식으로 이루어지기 때문에

내가 생각하는 대로 변수 상태가 변하면 -> 그 다음 바로 함수 실행

이게 안되는 것이었다.

 

 

이 문제를 해결하기 위해 useEffect를 활용하였다. 

useEffect(()=>{
    // 실행할 코드
 }, [변수명])

이런 식으로 코드를 짜면

[] 안의 변수가 변경되면 그 즉시 useEffect 안의 코드를 실행하게 된다. 

 

 

기존 코드

const [email, setEmail] = useState("");
const [emailValid, setEmailValid] = useState(false);

우선 입력받는 이메일을 저장할 변수 email, 이메일 형식을 체크하는 변수 emailValid를 useState로 선언해주었다. 

<input
    type="text"
    name="email"
    placeholder="EMAIL"
    onChange={(e) =>
        setEmail(e.target.value)
    }
/>
<button
    className="form-check-button"
    onClick={checkHandler}
>Check</button>

input 안의 값이 바뀔 때마다 setEmail(e.target.value) 를 통해 email 변수값을 변경해주고 있다. 

그리고 button의 onClick 이벤트에 checkHandler를 연결해주었다.

 

const checkHandler = async (e) => {
    e.preventDefault();

    var regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
    setEmailValid(regExp.test(email));
}

checkHandler에서 실행할 코드는 간략하게 이런 내용이다. 

이메일 형식 확인을 거친 후, test 문을 이용하여 true, false 여부를 emailValid 변수에 set해준다.

 

 

개선한 코드

useEffect(() => {  // Email 형식 체크
    var regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
    setEmailValid(regExp.test(email));
}, [email])

비동기적으로 작동하는 useState 때문에 버튼에 달려있는 checkHandler에서 email의 형식 체크를 해주는 것이 제대로 작동하지 않았기 때문에, email 형식 체크를 useEffect로 해주어야 했다.

 

그래서 위의 개선한 코드와 같이 대괄호 [] 안에 email 변수를 넣어줌으로써 email 변수값이 변경될 때마다 위의 이메일 형식 체크문이 작동되도록 하였다.