React Hook Form은 React 애플리케이션에서 폼 관리를 쉽게 할 수 있도록 돕는 라이브러리입니다. 하지만, 특히 처음 사용하는 개발자들은 몇 가지 일반적인 실수를 저지르기 쉽습니다. 이번 포스트에서는 React Hook Form을 사용할 때 자주 발생하는 실수와 그 해결 방법을 살펴보겠습니다.

1. useForm 훅의 초기값 설정 실수

React Hook Form을 사용할 때, useForm 훅을 통해 폼의 초기값을 설정하는 것이 중요합니다. 초기값을 설정하지 않거나 잘못 설정하면 폼의 동작이 예상과 다르게 작동할 수 있습니다.

실수 예시

import React from 'react';
import { useForm } from 'react-hook-form';

const MyForm = () => {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="example" ref={register} />
      <input type="submit" />
    </form>
  );
};

위 코드는 초기값을 설정하지 않아 example 필드의 값이 항상 비어 있는 상태로 제출됩니다.

해결 방법

초기값을 설정하려면 defaultValues 속성을 사용해야 합니다.

const { register, handleSubmit } = useForm({
  defaultValues: {
    example: '기본값',
  },
});

2. register 함수 누락

register 함수는 폼 필드를 React Hook Form에 연결하는 역할을 합니다. 이 함수를 누락하면 해당 필드의 값이 폼 상태에 포함되지 않아 제출할 때 문제가 발생합니다.

실수 예시

<input name="example" />

위와 같이 register 함수를 사용하지 않으면 이 필드는 폼 상태에 포함되지 않습니다.

해결 방법

모든 필드에 register 함수를 반드시 적용해야 합니다.

<input name="example" ref={register} />

3. 유효성 검사 오류

React Hook Form은 유효성 검사 기능을 제공하지만, 이를 잘못 설정하면 필드가 항상 유효하다고 판단될 수 있습니다. 이로 인해 사용자에게 잘못된 피드백을 줄 수 있습니다.

실수 예시

<input name="example" ref={register({ required: true })} />

위와 같이 설정했으나, 유효성 검사를 수행하지 않는 경우가 발생할 수 있습니다.

해결 방법

handleSubmit 함수를 사용하여 유효성 검사 결과를 처리해야 합니다. 
const onSubmit = (data) => {
  console.log(data);
};

const { errors } = useForm();

if (errors.example) {
  console.error("필수 입력입니다!");
}

4. 동적 필드 등록

폼 필드를 동적으로 추가하거나 제거할 때, React Hook Form에서 필드를 동적으로 관리하는 방법을 잘못 사용할 수 있습니다. 이로 인해 상태 관리에 문제가 발생할 수 있습니다.

실수 예시

const { register, control } = useForm();
const [fields, setFields] = useState([{ id: Math.random() }]);

const addField = () => {
  setFields([...fields, { id: Math.random() }]);
};

// 필드 렌더링
{fields.map((field, index) => (
  <input key={field.id} name={field-${index}} ref={register} />
))}

이렇게 하면 동적 필드가 제대로 관리되지 않을 수 있습니다.

해결 방법

useFieldArray 훅을 사용하여 필드를 관리하면 동적 필드를 효과적으로 처리할 수 있습니다. 
import { useFieldArray } from 'react-hook-form';

const { fields, append } = useFieldArray({
  control,
  name: "dynamicFields",
});

const addField = () => {
  append({}); // 새로운 필드 추가
};

5. 제출 처리 후 데이터 초기화

폼 제출 후 데이터를 초기화하는 것을 잊으면 사용자가 이전에 입력한 데이터를 보고 혼란스러워 할 수 있습니다.

실수 예시

const onSubmit = data => {
  console.log(data);
  // 데이터 초기화 없음
};

해결 방법

제출 후 reset 함수를 호출하여 폼 데이터를 초기화할 수 있습니다.

const onSubmit = data => {
  console.log(data);
  reset(); // 폼 데이터 초기화
};

마무리

React Hook Form은 강력하고 유용한 라이브러리지만, 잘못된 사용으로 인해 어려움을 겪을 수 있습니다. 본 포스트에서 소개한 일반적인 실수와 해결 방법을 통해 보다 효과적으로 React Hook Form을 사용할 수 있기를 바랍니다. 폼 관리를 쉽게 하면서도 유효성 검사와 동적 필드 관리까지 손쉽게 할 수 있도록 연습해보세요!