💡 Formik

먼저, Formik은 양식 처리에서 가장 성가신 3가지 부분을 도와주는 작은 라이브러리입니다.

Form양식을 제출(submit)할 때, 가장 성가신 3요소

• 폼 상태에서 값 가져오기
• 유효성 검사 및 오류 메세지
• 폼 submit 핸들링

1. 양식 상태에서 값을 가져와줍니다.
2. 유효성 검사를 도와주고 검증에 대한 오류 메시지를 나타내줍니다.
3. 양식 제출 처리를 해줍니다.

Formik은 유연한 라이브러리로 얼마나 사용할 지 결정할 수 있습니다. (이메일, 패스워드, 이름, 아이디 등등) 기능 또한 제어 할 수 있습니다.

const Form = () => {
  const intialValues = { email: "", password: "" };
  const [formValues, setFormValues] = useState(intialValues);
  const [formErrors, setFormErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);
}

사용시 useState hook을 사용하여 formValues, formErrors, isSubmitting에 대한 상태 변수를 설정합니다.

• formValues 변수는 사용자가 입력 필드에 입력 한 데이터를 보유합니다.
• formErrors 변수는 각 입력 필드에 대한 오류를 보유합니다.
• isSubmitting 변수는 양식이 제출 중인지 여부를 추적하는 논리형(boolean) 입니다. 이는 양식에 오류가 없는 경우에만 해당됩니다.

const submitForm = () => {
    console.log(formValues);
  };

 const handleChange = (e) => {
    const { name, value } = e.target;
    setFormValues({ ...formValues, [name]: value });
  };

const handleSubmit = (e) => {
    e.preventDefault();
    setFormErrors(validate(formValues));
    setIsSubmitting(true);
  };

const validate = (values) => {
    let errors = {};
    
    //정규식 표현
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/i;
    
    //이메일 값이 없을시
    if (!values.email) {
      errors.email = "Cannot be blank";
      //이메일 정규식 표현이 옳지 않을시
    } else if (!regex.test(values.email)) {
      errors.email = "Invalid email format";
    }
    
    //비밀번호 값이 없을시
    if (!values.password) {
      errors.password = "Cannot be blank";
      //비밀번호의 길이(length)가 4글자 이하일 때
    } else if (values.password.length < 4) {
      errors.password = "Password must be more than 4 characters";
    }
    
    //에러를 반환해줘 !
    return errors;
  };

// 폼태그에 값이 0 이거나, isSubmitting 이 false 상태일 때,
//submitForm을 누르면 [formErrors]가 마운트 되도록!
useEffect(() => {
    if (Object.keys(formErrors).length === 0 && isSubmitting) {
      submitForm();
    }
  }, [formErrors]);```

이 코드에는 4개의 양식 핸들러와 양식의 기능을 처리하기 위해 설정된 useEffect가 있습니다.

• handleChange : 입력이 formValues상태와 동기화 된 상태로 유지되고 사용자가 입력 할 때 상태가 업데이트됩니다.
• validate : formValues 객체를 이 함수에 대한 인수로 전달한 다음 이메일과 이름, 비밀번호를 유효성 검사 테스트 하면서 오류가 채워지고 반환됩니다.
• handleSubmit : 양식이 제출 될 때마다 formErrors 상태 변수는 setFormErrors (validate (formValues)) 메소드를 사용하여 오류를 나타냅니다.
• useEffect : formErrors 객체가 비어 있는지, isSubmitting이 참인지 확인합니다. 이 검사가 참이면 submitForm()이 호출됩니다. 단일 종속성, 즉 formErrors 객체도 있는데 formErrors 객체가 변경 될 때만 실행됩니다.
• submitForm : 폼 데이터의 제출을 처리합니다.

return (
    <div className="container">
      <h1>Sign in to continue</h1>
      
      {Object.keys(formErrors).length === 0 && isSubmitting && (
        <span className="success-msg">Signed in successfully</span>
      )}
      
      // 버튼을 누르면 이 폼에 데이터들이 제출되도록 handleSubmit
      <form onSubmit={handleSubmit} noValidate>
        
        //이메일 검사
        <div className="form-row">
          <label htmlFor="email">Email</label>
          <input
            type="email"
            name="email"
            id="email"
            value={formValues.email}
            onChange={handleChange}
            className={formErrors.email && "input-error"}
          />
          
          //에러시
          {formErrors.email && (
            <span className="error">{formErrors.email}</span>
          )}
        </div>
        
        //비밀번호 검사
        <div className="form-row">
          <label htmlFor="password">Password</label>
          <input
            type="password"
            name="password"
            id="password"
            value={formValues.password}
            onChange={handleChange}
            className={formErrors.password && "input-error"}
          />
          
          //에러시
          {formErrors.password && (
            <span className="error">{formErrors.password}</span>
          )}
        </div>
        <button type="submit">Sign In</button>
      </form>
    </div>
  );

💡 Yup이란?

Yup은 JavaScript 객체 스키마 유효성 검사기입니다. 사용자 지정 유효성 검사 규칙을 만드는 데 어떻게 도움이되는지 중점적으로 살펴 보겠습니다. 이것은 가입 양식에 대한 샘플 Yup 객체 스키마입니다

const SignUpSchema = Yup.object().shape({
//첫번째 이름 제어
  firstName: Yup.string()
    .min(2, "Too Short!")
    .max(50, "Too Long!")
    .required("Firstname is required"),

//다음 이름 제어
  lastName: Yup.string()
    .min(2, "Too Short!")
    .max(50, "Too Long!")
    .required("Lastname is required"),

// 핸드폰 번호 기능 제어
  phoneNumber: Yup.string()
    .required("Phone number is required")
    .matches(
/^([0]{1}|\+?[234]{3})([7-9]{1})([0|1]{1})([\d]{1})([\d]{7})$/g,
      "Invalid phone number"
    ),

// 이메일 기능 제어
  email: Yup.string().email().required("Email is required"),

// 비밀번호 기능 제어
  password: Yup.string()
    .required("Password is required")
    .min(6, "Password is too short - should be 6 chars minimum"),
});

위에서 볼 수 있듯이 직접 validate함수를 구현한 것 보다 코드가 간결해졌습니다.

Formik의 핵심 디자인 원칙 중 하나는 조직화를 유지하는 것이다.

Yup은 확실히 이 작업에 많은 도움을 줍니다.스키마는 매우 표현력이 풍부하고 직관적이고 재사용이 가능합니다.

💡 React Hook Form이란?

• 가장 큰 차이점은, 사용자 입력의 의해 야기되는 불필요한 re-rendering을 피하기 위해 uncontrolled components를 사용하도록 설계되었다.
• Hooks API!
• core concept은 register란 ref props이다. 이건 검증과 제출을 쉽게 해준다.
• html standard form validation과 유사한 규칙을 갖고 있다.
• 훨씬 적은 코드를 제공한다. 매우 적은 용량을 가지고 있다.
• 최소한의 re-rendering을 제공하고, 성능적으로 뛰어나고, 훅으로 통해 비제어 컴포넌트를 이용한다는 아이디어에 기반한다.
• 유효성 검증을 위한 내부 기능이 포함되어 있지만, 필요하다면 yup 을 사용할 수 있습니다.
• 타입스크립트로 작성된 프로젝트라서 타입스크립트와 아주 잘 맞습니다 👍