DiaryProject(React) - 회원가입 폼(7) - 트러블 슈팅(with useEffect)

ryan·2022년 5월 11일
0

수정사항

실시간 유효성 검사를 구현했지만, state에는 실시간으로 값이 반영되지만 실시간으로 렌더링이 되지 않아, 비밀번호 유효성 조건인 8자 이상을 충족시켰음에도 alert 메세지가 출력 에러를 확인.


문제의 원인

(제대로 이해한게 맞다면)
실시간 유효성 검사 함수의 외부 함수가 'Onchange'라는 콜백 함수였다는 점을 잊고 있었다. 자바스크립트의 이벤트 루프를 생각해보면 된다. 기본적으로 콜백 함수는 비동기이기 때문에 백그라운드에서 호출 스택이 없어질 때까지 대기한다. 이번 에러에서도 렌더(렌더도 호출 스택에 포함되기 때문에)가 된 이후에 onchange의 콜백이 실행되어 state가 실시간으로 값이 반영되는 것처럼 보이지만 렌더 이후에 state 값의 변경이 이루어지는 것이였다.

참고 : console log the state after using useState doesn't return the current value

해결방법

  • 실시간 유효성 검사 함수를 분리하여 지정한 값이 변경될 때마다 렌더링을 다시 해주는 hook인 useEffect에 적용했다.
  • 지정한 값(여기서는 email,password)가 바뀔 때마다 useEffect 내부 코드가 실행된다. 이로서 실시간으로 유효성 검사를 할 수 있게 됐다.
  • 또한 실시간으로 값을 입력받는 함수와 실시간으로 값의 유효성을 검사하는 함수가 분리되어 가독성이 더 올라가는 추가적인 효과도 있었다.

profile
프론트엔드 개발자

0개의 댓글