React Hook Form VS Formik - 정리

https://blog.bitsrc.io/react-hook-form-vs-formik-form-builder-library-for-react-23ed559fdae 정리함

• 나만 불편하다고 느끼는게 아니였음.
• 폼의 보일러플레이트는 많이 필요한거였음
• 생각보다 유용한 패턴
• 적은 용량, 적은 코드, 쉬운 폼 작성, hook을 이용한 폼 방식, 뛰어난 퍼포먼스

const handleChange = ({ target }) => {
  const { formValues } = formState;
  formValues[target.name] = target.value;
  setFormState({ formValues });
  handleValidation(target);
};

정리

• 리액트로 폼을 작업하는 것은 꽤나 고단하다.
• 리액트는 인터페이스 행동에 집중한 ui libarary라 그렇다.
• 리액트로 폼을 다루긴 위해선 많은 보일러플레이트 코드가 필요하다.
  • 유저 입력 값의 상태를 관리하고 검증하기
  • 유효하지 않은 에러 메시지를 추적하기
  • 폼 제출 다루기
• 저자는 formik을 주로 사용하면서 만족했지만, 최근에 React Hook Form을 사용하게 되었고, 몇 가지 장점이 있다고 생각했다.

no libarary

https://bit.dev/nsebhastian/tutorial-examples/react-regular-form-example?example=5ee3a82b65d2820019261869

const [formState, setFormState] = useState({
  formValues: {
    email: "",
    password: ""
  },
  formErrors: {
    email: "",
    password: ""
  },
  formValidity: {
    email: false,
    password: false
  }
});

<input name="firstName" onChage={handleChange} />

const handleChange = ({target}) => {
  const { formValues } = formState;
  formValues[target.name] = target.value;
  setFormState({ formValues });
  handleValidation(target);
};

const handleSubmit = event => {
  event.preventDefault();
  const { formValues, formValidity } = formState;
  if (Object.values(formValidity).every(Boolean)) {
    // Form is valid
    console.log(formValues);
  } else {
    for (let key in formValues) {
      let target = {
        name: key,
        value: formValues[key]
      };
      handleValidation(target);
    }
  }
};

1. value, erroer, validity 상태를 만든다.
2. name과 handler를 적는다.
3. target.name으로 formValue를 변경시킨다.
4. 마찬가지로 target정보로 validation을 진행한다.
5. handleValidation에서 errors, validity를 갱신한다.
6. 제출할 때 모두 검증되면 제출하고 아니면 모든 값에 대한 검증을 다시한다.

문제

• 2가지 필드 밖에 안되는데도 너무 많은 코드들이 작성됨.
• 10개 이상되면 끔직해진다.

formik의 해결방안

1. value를 가지고 form state를 신경안쓰게 해줌
2. 검증과 에러메시지를 제공해줌
3. 폼 제출을 다뤄줌

https://bit.dev/nsebhastian/tutorial-examples/react-formik-example?example=5ee39cf3c166fb0019182911

• 옛날 provier방식
• 검증 함수를 일반적인 폼에서 간소화시킬 수 있는 대신 분리할 수 있지만, 매우 오류를 만들기 쉽다.

function validateEmail(value) {
  let error;
  if (!value) {
    error = "Email is required";
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
    error = "Invalid email address format";
  }
  
  return error;
}
function validatePassword(value) {
  let error;
  if (!value) {
    error = "Password is required";
  } else if (value.length < 3) {
    error = "Password must be 3 characters at minimum";
  }
  
  return error;
}

react hook form

https://bit.dev/nsebhastian/tutorial-examples/react-hook-form-example?example=5ee3abc2e7a0aa0019d704eb

• 가장 큰 차이점은, 사용자 입력의 의해 야기되는 불필요한 re-rendering을 피하기 위해 uncontrolled components를 사용하도록 설계되었다.
• core concept은 register란 ref props이다. 이건 검증과 제출을 쉽게 해준다.
• html standard form validation과 유사한 규칙을 갖고 있다.
• 훨씬 적은 코드를 제공한다. 매우 적은 용량을 가지고 있다.
• 최소한의 re-rendering을 제공하고, 성능적으로 뛰어나고, 훅으로 통해 비제어 컴포넌트를 이용한다는 아이디어에 기반한다.