리액트 훅 폼을 선택한 이유
기존에 회원가입 폼이나 마이페이지 정보 수정을 할 때 순수 리액트만으로 form 형식을 만든 다음 useState, onChange 을 사용해 하드코딩을 했었다.
사용 중인 상태가 많지 않다면 큰 문제가 되지 않지만, 리액트는 상태가 변화하면 리렌더링된다는 중요한 특성이 있다.
그래서 상태가 점점 더 추가되어가다 보면 렌더링 뿐만 아니라 특정 상태의 변화로 인해 의도하지 않은 사이드 이펙트가 일어나기도 한다.
리액트 훅 폼 라이브러리는 비제어 컴포넌트 방식으로 구현되어 있기에 리렌더링 이슈 해결 가능했다.
또한, formik, redux-form 같은 다른 라이브러리도 있지만 성능 이슈 측면이나 패키지 사이즈도 작고 syntax 측면에서도 상대적으로 더 깔끔하다는 생각이 들어 리액트 훅 폼을 사용하기로 했다
useForm 사용하기
import { useForm } from 'react-hook-form';
// react-hook-form 에서 import한 useForm훅을 사용해 객체 구조분해할당으로 register, handleSubmit, watch, errors 등을 꺼낸다.
const {register, handleSubmit,watch, formState: { errors }} = useForm();
function App() {
const {
register,
handleSubmit,
watch,
formState: { errors }
} = useForm();
🌝 const submitHandler = (data) => {
console.log(data);
};
console.log(👀 watch("example")); // you can watch individual input by pass the name of the input
return (
<form onSubmit={handleSubmit(submitHandler)}>
// submit을 핸들링할 submitHandler 함수를 handleSubmit 함수로 감싸 form의 onSubmit 어트리뷰트에 연결
<input defaultValue="test" 🔥{...register("example")} />
<input {...register("exampleRequired", 🍏 { required: true })} />
❌ {errors.exampleRequired && <p>This field is required</p>}
<input type="submit" />
</form>
);
}- 🔥
register: 내가 원하는 input에 register 함수를 통해 등록하면 react hook form 에서 validation과 submission에서 form을 통해 입력된 값들이 사용가능하다. 그러므로 입력을 받고자 하는 모든 필드에서는 반드시 register 함수를 사용할 것! - 🍏
validation: register 함수의 두번째 인자로 들어가며required,minLength(길이),maxLength,min(숫자값),max,pattern등이 들어갈 수 있다. - 🌝
handleSubmit: validation이 정상적으로 완료된 데이터는 handleSubmit 함수를 통해서 인자로 받을 수 있다. (위에선 data라고 이름 지었음). 이렇게 되면 form이 submission 되었을 때, onSubmit 함수를 통해서 값들을 받을 수 있게 된다. - ❌
errors: 유효성이 통과되지 않으면 에러 상태를 내보낸다. - 👀
watch: register한 항목의 변경사항을 감시한다. 시시각각 바뀌는 정보를 담기 위해서는 watch 사용할 것! getValues: 호출하는 시점의 value 값을 읽어올 수 있다. watch와의 차이점은 getValues는 다시 렌더링을 트리거하지 않는다.setValue: 필드값을 업데이트하는 방법.
궁금하거나 어려웠던 점
앞에서 서술했듯 리액트 훅 폼 라이브러리는 비제어형 컴포넌트 방식으로 구현한 것이다. 그러나 많은 경우에 React-Select, MUI 같은 제어형 컴포넌트 라이브러리와 작업하기 때문에 이를 고려해 해당 라이브러리가 지원하는 controller 라는 컴포넌트가 있다. 근데 아직도 이 컴포넌트의 유용성을 잘 이해하지 못했다. 그냥 useForm에서 mode를 onChange라고 설정하면 되는 거 아닌가? 마이페이지에서 실시간 유효성 검사를 할 때 controller 컴포넌트 사용없이도 잘 했는데, 내 이해도가 부족한 것 같아 다시 공부해보려 한다...
참고사이트
리액트 훅 폼 공식사이트
https://blog.toycrane.xyz/react%EC%97%90%EC%84%9C-form-%EC%89%BD%EA%B2%8C-%EB%8B%A4%EB%A3%A8%EA%B8%B0-b3b192cf2b33
