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

2024년 5월 14일약 5분정적 콘텐츠

React Hook FormReact프런트엔드 개발웹 개발

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

1단계: FormProvider 설정

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

import { 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 예제입니다.

import { 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 컴포넌트를 폼에서 사용합니다.

import 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 함수로 폼 제출을 처리할 수 있습니다.

function 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 옵션을 사용합니다.

import { 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 사용 예제입니다.

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

Dominion Legist 법률 플랫폼

Dominion Legist를 법률 CMS에서 서비스 이해, 로펌 평가, 법률 정보 탐색, 비공개 상담 시작을 지원하는 다국어 고객 플랫폼으로 발전시켰습니다.

6개 법률 업무 분야를 우즈베크어, 영어, 러시아어로 명확하고 의사결정 중심적인 서비스 여정으로 재구성했습니다.
공개 브랜드, 창립자 프로필, 법률 콘텐츠, FAQ, 비공개 문의 흐름을 하나의 플랫폼으로 연결했습니다.

프로젝트 시작하기

제품에 이런 수준의 사고와 실행이 필요하신가요?

제품을 구체화하고 인터페이스, 시스템, 개선 주기까지 실제로 출시할 파트너가 필요하다면 연락해 주세요.

프로젝트 시작하기