리액트-훅-폼

김현준·2024년 3월 2일

useForm

useForm 알아보기

const {  } = useForm();

register:
폼 필드를 React Hook Form에 등록
onChange(event), value 메커니즘을 대체

const { register } = useForm({defautValues: {기본값 설정(안해도 됨) ex) email: '@naver.com'}});
<input {...register('fieldName', valueAsNumber: true)} />

valueAsNumber:
true는 값을 number로 변환해준다. 백엔드에서 number를 받아야하는 경우 에러가 발생할 확률을 줄여준다.
form은 기본적으로 text를 받기 때문에 리액트 훅 폼은 숫자를 써줘도 그냥 텍스트로 변환한다.

handleSubmit:
폼을 제출할 때 호출되는 함수를 정의할 때 사용. 이 함수는 <폼이 제출될 때 실행될 콜백 함수를 인수로> 받습니다.

const { handleSubmit } = useForm();
const onSubmit = (data) => {
  // data에 폼 필드의 값이 포함됩니다.
};
<form onSubmit={handleSubmit(onSubmit)}> //두 번째 인자로 데이터가 유효하지 않을 때의 함수도 가능 유효함수 | 안유효함수
  {/* 폼 필드 */}
</form>

setError
특정한 에러를 발생시켜준다.

const {register, watch, handleSubmit, formState: { errors }, setError,} = useForm<IFormData>();
  const onValue = (data: IFormData) => {
    if (data.password1 !== data.password2) {
      setError("password1", { message: "비밀번호가 일치하지 않습니다." });
    }

setValue
submit되고 값이 handleSubmit의 검사를 통과하면 input의 값을 설정할 수 있다.(비울 수도 있음)

  const { register, handleSubmit, setValue } = useForm<IForm>();
  const onSubmit = (data: IForm) => {
    console.log(data);
    setValue("toDo", ""); //toDo는 input에 설정한 이름이다.
  };

값을 이렇게 따로 빼서 조회할 수도 있다.
ex)회원가입 창 안에서 이메일 인증 버튼만 따로 조회해야하는 경우

const onEmailConfirm = () => {
    const email = getValues("email");
  };
...
return (
<form onSubmit={handleSubmit(onJoinSubmit)}>
  <input {...register("email", { required: true })} type="email"/>
  <button onClick={onEmailConfirm}>이메일 확인</button>
...
<button>회원가입</button>
</form>
)

reset() // 전체 폼을 초기화

reset({ email: "" }); // form에서 특정 필드만 리셋
ex) 한 화면에 email, phone 두 개의 input이 있을 때 각각 reset()설정 안 하면 phone input 입력시 email결과도 같이 나옴

resetField() // 특정 필드 초기화
resetField("avatar")

watch
모든 form의 변경을 감지할 수 있다.

const avatar = watch("avatar");
  //avatar 미리보기
  useEffect(() => {
    if (avatar && avatar.length > 0) {
      //avatar는 FileList고 첫 원소가 파일으므로
      const file = avatar[0]; //브라우저 메모리에 있는 파일
      setAvatarPreview(URL.createObjectURL(file)); //URL.createObjectURL()을 통해서 file에 접근
    } else return;
  }, [avatar]);

이런 식으로 아바타 변경 시 미리보기 등에 활용할 수 있음

formState:
폼의 상태 정보를 포함하며, 폼의 유효성 검사 상태 및 다른 중요한 정보를 제공
formState 객체의 주요 속성은 다음과 같습니다:

isDirty: 사용자가 어떤 필드도 수정했는지 여부를 나타내는 부울 값.
isSubmitting: 폼이 제출 중인지 여부를 나타내는 부울 값.
isSubmitSuccessful: 제출이 성공했는지 여부를 나타내는 부울 값(최초 한 번만 true가 된다.).
errors: 폼 필드의 유효성 검사 오류를 포함하는 객체.

 <textarea
          id="message"
          {...register('message', { 
            required: true, 
            maxLength: 200 
          })}
          rows="4"
          cols="50"
        />
        {errors.message && errors.message.type === 'maxLength' && (
          <p>메시지는 200자 이하로 입력해주세요.</p>
        )}
        {errors.message && errors.message.type === 'required' && (
          <p>메시지는 필수 입력 항목입니다.</p>
        )}

이렇게 type을 지정해서 원하는 설정의 에러메시지를 출력할 수도 있다.

mode 옵션

유효성 검사를 실행하는 시점을 제어하는 설정
mode를 지정하지 않으면 기본값은 onSubmit이다.

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>({
    mode: "onBlur", // mode 설정: onBlur, onChange, onSubmit, onTouched, all 중 선택 가능
    defaultValues: {
      title: "",
    },
  });

옵션	검증 시점	주요 특징
`onBlur`	필드에서 포커스가 벗어날 때	입력을 마친 후 검사. 빠른 피드백 제공.
`onChange`	입력 값이 변경될 때	실시간 검사. 빠른 피드백, 성능 영향 가능.
`onSubmit`	폼 제출 시	폼 작성 중 방해하지 않음. 제출 후 오류 확인.
`onTouched`	필드에 한 번이라도 터치된 후	터치 이후 검사. 사용자 경험을 방해하지 않으면서 피드백 제공.
`all`	`onBlur` + `onChange` 모두 사용	모든 경우에 검사. 빠른 피드백 제공, 성능에 민감한 프로젝트에서는 주의 필요.