[React] 비밀번호 일치 Form 유효성검사 중 오류 해결(useEffect)

비밀번호 input과 비밀번호 재확인 input 2개의 비밀번호 일치여부 판단 코드를 작성 중 오류가 났다.

 

helperText는 useState로 값이 변경되며 이러한 값이 변하는 조건은 다른 파일에서 props를 사용해 받아온 상황이다. 

만약 아래와 같이 코드를 작성해서 helperText값이 변경되도록 하면 한단계 늦게 작동되는 오류가 났다.

▼ 오류 코드

 <p className='helperText'>{helperText}</p>

 

하지만 이렇게 작성할 경우는 바로 변경된 useState값이 적용되었다.

▼ 정상작동 코드

<p className='helperText'>
  {confirm ? '' : '비밀번호가 일치하지 않습니다.'}
</p>

 

하드코딩으로 한 경우만 바로 적용되어 텍스트를 나타낼 수 있었다.

{helperText}가 한박자 늦게 반영되는 이유는 상태(state) 업데이트가 비동기로 이루어지기 때문이다.

setHelperText()가 실행되면 해당 상태(state)가 업데이트 되고, 이후에 컴포넌트가 다시 렌더링되면서 {helperText}가 변경되어 반영된다.

value값이 바뀌었을때 helperText도 바뀌는데 이에 대한 랜더링 문제였다.

 

해결 방법으로는 useEffect() Hook을 활용하는 것인데 Dependency를 올바르게 작성하자 해결이 되었다.

useEffect() Hook을 사용하면 상태(state)가 업데이트 될 때마다 컴포넌트가 다시 렌더링 되기 전에 추가적인 작업을 할 수 있다. 예를 들어, 상태(state)가 업데이트 되면 {helperText}를 업데이트하는 작업을 할 수 있다.

 

useEffect 활용하여 작성한 코드이다.

이 코드에서 중요한 것은 Dependency []를 잘 작성하여야 변경시 랜더링이 된다는 것이다.

useEffect를 활용해 input 의 value와 조건을 걸기 위한 confirm props가 변경시 helperText가 바뀌어 출력되도록 해 오류를 해결했다.

 //비밀번호 재확인 (useEffect를 사용해 value값,confirm이 바뀔때 helperText가 재랜더링되도록 해야함)
  useEffect(() => {
    if (type === 'password' && value !== '') {
      if (confirm === false) {
        setIsError('err');
        return setHelperText(errorText);
      } else if (confirm === true) {
        setIsError('success');
        return setHelperText(successText);
      }
    } //
  }, [helperText, value, confirm]); //디펜더시 중요