유효성 검사 로직 구현하기

디자인만 신경 쓴지 2주 정도, 어느정도의 컴포넌트 구현이 끝나가고, 이제는 로직에 힘을 실어야 할 때가 왔다. 개인적으로는 디자인 보다 로직 구현을 더 좋아하는 편인데, 이번 유효성 로직은 보안성, 확장성, 재사용성을 모두 살린 괜찮은 로직이 구현되었다.

원리는 대충 이렇다. 기존의 재사용 컴포넌트인 input 컴포넌트에, 외부에서 함수를 만들어 호출할 수 있도록 props로 전달한다. 사용되는 input 컴포넌트 마다 유효성 검사가 1개, 2개, 여러개 인것도 있으니, 필요한 함수는 모두 객체로 모아 전달 한후, 반복문을 통해 하나하나 호출한다. 객체를 보낼 때, 에러에 필요한 텍스트문도 함께 보낸다. 이로써, 함수가 에러가 나는 경우, 해당 텍스트문을 에러 표시와 함께 렌더링 한다. 하나라도 함수가 에러가 나는 경우, 바로 break 를 건다. 이를 통해 제작하는 유효성 검사 함수마다 우선순위를 나타낼 수 있게 된다.

재사용 컴포넌트를 그대로 사용하면서, 사용되는 컴포넌트마다 다른 함수를 적용할 수 있는게 좋았다. 다만 연산처리가 많아져, 초기 렌더링이 더욱 늦어지게 되었다.

현재는 이메일과 비밀번호 유효성 검사만 진행된 상황이다. 문제점은 일단 보류해두고, 유효성 검사 로직을 일단 다 만든 후에, 나중에 디바운싱이나 최적화 작업을 해주어야겠다.

// input 컴포넌트 안의 내장 유효성 함수
 let checkValid
  function inputValidHandler() {
    clearTimeout(checkValid)
    checkValid = setTimeout(() => {
      let errorComponent = ''
      for (let func in onValid) {
        if (!onValid[func].func(inputRef.current.value, meta)) {
          errorComponent = <ErrorComponent text={onValid[func].message} />
          break
        }
      }
      console.log('유효성 체크')
      setErrorComponent(errorComponent)
      onData({
        value: inputRef.current.value,
        valid: errorComponent === '' ? true : false,
      })
    }, 200)
  }

// 각 input 정보 별 유효성 검사 함수 모듈
export function passwordValidLengthHandler(inputValue) {
  if (inputValue.trim().length < 8) {
    return false
  }
  return true
}

export function passwordValidIncludeLetterHandler(inputValue) {
  const regxPassowrd = /^.*(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%*^&+=`~]).*$/
  if (!regxPassowrd.test(inputValue.trim())) {
    return false
  }
  return true
}

export function passwordValidConfirmHandler(inputValue, target) {
  return inputValue === target
}