[LAB-8] input의 입력된 값이 즉시 적용되지 않습니다!

질문 작성자

김진우

문제 상황


function emailValidation(email){
    const emailRegex = /^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i;
    let warningMessage = '';

    if(!emailRegex.test(email)) {
      warningMessage="올바른 이메일 형식이 아닙니다"
      setEmailWarning(warningMessage);
      setEmailVisible(true);
    } else {
      setEmailVisible(false);
    };
  }

<RegisterFormInput label="이메일" name="email" type="email" placeholder="예시) frontendo@saja.com" onChange={(e) => {setEmail(e.target.value); emailValidation(email)}}>
  <Button className="registerButtonShort">중복확인</Button>
  <span className={emailVisible === true ? "registerWarning showWarning" : "registerWarning"}>{emailWarning}</span>
</RegisterFormInput>

input에 들어온 값을 e.target.value로 받아 정규식표현으로 유효성을 검사를 해주려고 했습니다.

위 사진에서 보이는 것처럼 입력값을 즉시 반영하지 않고 한 박자 느리게 들어가고 있습니다. 리액트의 state가 비동기로 동작하여 발생하는 문제인 것 같은데 어떻게 해결하는 게 좋을까요?

useEffect()를 사용하는 방법을 생각해봤지만 어떻게 사용할 수 있을 지 감이 잘 오지 않아 질문을 올려봅니다ㅠ

프로젝트 저장소 URL

https://github.com/likelion-frontendo/likelion-saja/blob/develop/src/pages/Register/RegisterForm.jsx

문제 상황

입력 값을 즉시 반영하지 않고 한 박자 느리게 들어가고 있습니다. 리액트의 state가 비동기로 동작하여 발생하는 문제인 것 같은데 어떻게 해결하는 게 좋을까요? useEffect()를 사용하는 방법을 생각해봤지만 어떻게 사용할 수 있을 지 감이 잘 오지 않아 질문을 올려봅니다.

문제 해결

상태 업데이트가 리액트에 의해 처리된 후, 이펙트 함수는 실행되도록 구성하여 문제를 해결할 수 있습니다.

작성할 이펙트 훅 코드는 아래와 같이 구성합니다.

useLayoutEffect(() => { // 사용자 입력 값으로 상태 업데이트 후, 이메일 유효성 검사 emailValidation(email); }, [email]);

이펙트 훅을 사용하여 문제를 해결한 상황을 보여주는 영상입니다. 😃

참고

useLayoutEffect 훅은 useEffect와 사용법이 동일하지만, 실행 시점이 더 빠릅니다.

다만, 새로운 리액트 공식 문서를 보면 useLayoutEffect 훅은 성능 저하를 유발할 수 있으니 가급적 useEffect 훅 사용을 권장합니다. 예시 코드는 useLayoutEffect 훅을 사용했지만, 프로젝트에 반영할 때는 useEffect 훅을 사용하세요. 🥲

yamoo9 / likelion-FEQA