React 유효성 검사

React Hook Form

• React Hook Form 이란?
  React 내에서 From을 쉽게 제어하고 손쉽게 유효성 검사를 처리하도록 도와주는 라이브러리.

기존에 입력 필드들을 처리할 때면 state를 선언하고 각 입력 필드에 event를 연결해 value를 받아오는 과정을 거쳐야 한다. 회원가입, 설문조사 등 입력 필드가 많아 질 수록 제어하기 힘들어지고 유효성 검사를 처리하기 어려워지는데, react hook form을 사용하면 value와 onChange로 각 입력 필드에 대한 처리를 추가할 필요가 없고 state도 직접 관리할 필요가 없다.

React Hook Form 공식 문서

YUP

• Yup이란?
  모델의 스키마를 정의할 수 있도록 하며, 유효 값 검증(validation), 형 변환(parsing), 원하는 값으로 조작(transformation)등의 기능을 제공하는 라이브러리이다.

리액트 훅 폼과 조합이 특히 좋다고 한다. 입력 검증을 직접 구현했다면 입력 검증이 로직이 되니까 이를 위한 테스트가 필요하고, 코드도 길어진다. yup 덕분에 직접 로직을 작성한 것은 거의 없으니 테스트를 덜 신경쓰게 되었다.
사용법은 아래 참조해놓은 링크에 친절히 설명되어 있으니 보고 따라하면 된다.

npm YUP
YUP 공식 문서

React hook form 없이 유효성 검사

React Hook Form과 YUP을 사용하면 정말로 쉽게 유효성 검사가 가능했지만, 다른 프로젝트를 하면서 라이브러리를 사용하지 말라는 제약사항이 있었다. 따라서 정규식을 사용하여 유효성 검사를 진행했다. 이메일 형식이기만 하면 된다는 것과 비밀번호는 8자리 이상이기만 하면 되었기 때문에 아래와 같이 만들었다.

const validate = useCallback(() => {
    const errors = {
      email: "",
      password: "",
    };

    const emailCheck = () => {
      var regex = /([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
      return values.email !== "" && values.email !== "undefined" && regex.test(values.email);
    };

    if (!emailCheck(values.email)) {
      errors.email = "이메일 형식에 맞게 입력 해 주세요";
    }
    if (!values.password || values.password.length < 8) {
      errors.password = "비밀번호를 8자리 이상 입력하세요";
    }
    if (!errors.email && !errors.password) {
      setDisabled(false);
    }
    return errors;
  }, [values]);