React Hook Form으로 재사용 컴포넌트 만들기: 단계별 가이드

React Hook Form은 React 애플리케이션의 폼 처리를 단순화하는 강력한 라이브러리입니다. 재사용 폼 컴포넌트를 만들면 개발 과정을 정리하고 폼 전반의 일관성을 유지할 수 있습니다. 지난 글에서는 React Hook Form을 사용하면 좋은 이유를 설명했습니다. 설치 방법은 다른 자료가 많으므로, 이번에는 설명이 상대적으로 부족한 재사용 컴포넌트 활용법에 집중하겠습니다.

1단계: FormProvider 설정

폼 컴포넌트를 FormProvider로 감싸면 각 컴포넌트가 폼 컨텍스트에 접근하고 필드를 등록할 수 있습니다.

copyimport { FormProvider } from 'react-hook-form';

export default function MyForm() {
  const methods = useForm();
  return (
    <FormProvider {...methods}>
      {/* Your form components go here */}
    </FormProvider>
  );
}

2단계: 재사용 입력 컴포넌트 만들기

React Hook Form의 장점 중 하나는 재사용 가능한 입력 컴포넌트를 만들 수 있다는 점입니다. 아래는 InputField 예제입니다.

copyimport { useFormContext } from 'react-hook-form';

function InputField({ name, label, type, required, ...rest }) {

  const { register, formState: { errors } } = useFormContext();
  const error = errors[name]?.message;
  return (
    <div className={`input-wrapper ${error ? 'has-error' : ''}`}>
      <label htmlFor={name}>{label}</label>
      <input
        type={type || 'text'}
        {...register(name, { required: required })}
        {...rest}
      />
      {error && <p className="error-message">{error}</p>}
    </div>
  );
}

3단계: 재사용 입력 컴포넌트 사용

이제 만든 InputField 컴포넌트를 폼에서 사용합니다.

copyimport InputForm from './InputForm';

function MyForm() {
  // ...
  return (
    <FormProvider {...methods}>
      <InputField
        name="name"
        label="Name"
        placeholder="Enter your name"
        required="Name is required"
      />
      <InputField
        name="email"
        label="Email"
        placeholder="Enter your email"
        type="email"
        required="Email is required"
      />
      {/* Other form fields */}
    </FormProvider>
  );
}

4단계: 폼 제출 처리

React Hook Form의 handleSubmit 함수로 폼 제출을 처리할 수 있습니다.

copyfunction MyForm() {
  const methods = useForm();
  const { handleSubmit } = methods;

const onSubmit = (data) => {
    // Handle form submission
    console.log(data);
  };
  return (
    <FormProvider {...methods}>
      {/* Form fields */}
      <button type="submit">Submit</button>
    </FormProvider>
  );
}

5단계: 필드 검증 처리

React Hook Form은 기본 검증 규칙과 사용자 정의 검증 함수를 지원합니다. 아래 예제는 required와 validate 옵션을 사용합니다.

copyimport { useFormContext } from 'react-hook-form';

function InputField({ name, label, type, required, validate, ...rest }) {
  const { register, formState: { errors } } = useFormContext();
  const error = errors[id]?.message;
  return (
    <div className={`input-wrapper ${error ? 'has-error' : ''}`}>
      <label htmlFor={name}>{label}</label>
      <input
        type={type || 'text'}
        {...register(name, { required: required, validate: validate })}
        {...rest}
      />
      {error && <p className="error-message">{error}</p>}
    </div>
  );
}

required는 필수 필드 여부를 정합니다. validate는 값이 유효하면 true, 그렇지 않으면 false를 반환하는 사용자 정의 함수를 정의할 수 있게 합니다.

검증이 포함된 InputField 사용 예제입니다.

copyfunction MyForm() {
  // ...

const validateEmail = (value) => {
    // Custom email validation logic
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(value) || 'Invalid email format';
  };
  return (
    <FormProvider {...methods}>
      <InputField
        name="email"
        label="Email"
        placeholder="Enter your email"
        type="email"
        required="Email is required"
        validate={validateEmail}
      />
      {/* Other form fields */}
    </FormProvider>
  );
}

React Hook Form은 텍스트 입력뿐 아니라 라디오 버튼, 체크박스, 파일 입력 등 다양한 입력을 지원합니다. 제어·비제어 컴포넌트를 사용하는 더 복잡한 사례에도 적용할 수 있습니다. 필요하다면 다음 글에서 구체적인 고급 활용법을 다루겠습니다.