TIL-23.04.21

 

 

문제점

email과 password의 input값을 받고,   input value의 유효성 검사까지 동시에 할수있는 로그인 모달창을 만들어 보았다.

내가 생각한 유효성 검사는 email에는 '@'가 들어가야한다 , password는 최소 7글자 이상이어야 한다는 2가지의 요구사항이다.

useEffect() 훅을 사용해 email input의 value와 password input의 value를 디펜던시에 넣어 변화를 감시하게 했고, 훅 내부에 유효성 검사를 진행하는

함수를 작성해넣었다.  그리고 내부에 언제 유효성검사가 진행되는지 확인하기 위해 콘솔로그를 찍어보았다

근데..input에 한글자 한글자 넣을때마다 매번 유효성 검사를 진행한다는 것을 콘솔을 통해 확인했다. 

이건 내가 원했던 바가 아니었다. 그렇게나 많이 불필요한 유효성검사를 할필요는 없었는데 말이다..

어떻게 하면 불필요한 유효성검사의 횟수를 줄일수 있을까..

 

 

 

시도해본것

email과 password의 state에 isValid라는 프로퍼티를 추가해보자

1차적으론 value값만을 관리했으니, 여기에 isValid 프로퍼티를 추가해 해당 입력값이 유효하진 유효하지 않은지를 객체로 각각의 상태를 관리해보자는 생각이 들었다

const [emailState, dispatchEmail] = useReducer(emailReducer, {
    value: '',
    isValid: undefined,
  });
  
 const [passwordState, dispatchPassword] = useReducer(passwordReducer, {
    value: '',
    isValid: undefined,
 });

useReducer훅을 사용해 state를 관리하기로 했고, 초기값에 value프로퍼티와 isValid프로퍼티를 넣어 2개의 프로퍼티를 관리하기로했다. 그리고 또 생각해낸것이 기존 useEffect훅의 디펜던시에 input value를 감시하게 해서 매 입력마다 유효성검사를 한것같은데?

그러면 디펜던시에 isValid의 변화를 감시하게 해볼까? 라는 생각에 넣어보았다.

바로 해결되어버렸다...email , password input값이 유효성검사를 통과하면 

const [formIsValid, setFormIsValid] = useState(false);

  useEffect(() => {
    const identifier = setTimeout(() => {
      console.log('check check!!!');
      setFormIsValid(emailIsValid && passwordIsValid);
    }, 500);

    return () => {
      console.log('CLEAN UP');
      clearTimeout(identifier);
    };
  }, [emailIsValid, passwordIsValid]);

formIsValid를 true로 만들어줬고, 이를 통해 로그인 후 모달을 띄워주게 만들었다.

유효성 검사 횟수의 콘솔도 내가 원하던대로 유효성 조건 범위에 들어올때, 조건에 맞지않을때만 나왔다.

아직까지는 습관인가보다...state를 관리할때 객체로 관리하는것에 대해 부담감을 느끼나보다... 더욱더 공부해서 state를 객체로 관리하는걸 오히려 자연스럽게 생각하도록 만들어야지

 

 

 

알게된점

state를 관리할때 객체로 관리하는걸 두려워하지말자!