입력 폼 React-Hook-Form 사용법

입력 폼 React-Hook-Form 사용법

React-Hook-Form은 비제어 컴포넌트를 활용하여 폼 입력을 쉽게 관리하고, 성능을 최적화하는 훅을 제공합니다. 실시간 유효성 검사 및 비동기 처리를 지원하여 폼 데이터를 손쉽게 처리할 수 있습니다.

입력 폼 React-Hook-Form 사용법

1. 비제어 컴포넌트란?

비제어 컴포넌트는 사용자가 입력하는 값이 React의 상태에 의해 즉각적으로 제어되지 않는 컴포넌트입니다. 이는 브라우저의 기본 동작을 유지하면서도 폼 데이터를 관리할 수 있는 장점이 있으며, 제어 컴포넌트와 비교하여 더욱 간단하고 성능적인 이점을 제공합니다.

2. React Hook Form의 기본 기능

React Hook Form의 기본 훅인 useForm은 다양한 기능을 제공합니다. 주요 기능은 다음과 같습니다:

• register: 폼 필드를 등록하고 유효성 검사 규칙을 설정.
• handleSubmit: 폼 제출 시 호출되는 함수로, 유효성 검사를 수행.
• reset: 폼을 초기화.
• trigger: 유효성 검사를 트리거.

Register 사용법

register 함수는 각 폼 필드를 등록하고, 유효성 검사와 제출 로직을 추가할 수 있습니다. Ref를 통해 필드의 값을 관리하며, 규칙 옵션으로 유효성 검사 기준을 설정할 수 있습니다.

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

export default function App() {
  const { register } = useForm();
  return <input {...register('firstName')} />;
}

또는 다음과 같이 Ref와 함께 사용할 수 있습니다:

export default function App() {
  const { register } = useForm();
  const { onChange, onBlur, name, ref } = register('firstName');
  return (
    <input 
      onChange={onChange}
      onBlur={onBlur}
      name={name}
      ref={ref} 
    />
  );
}

3. 유효성 검사 옵션 (Validation)

React Hook Form에서 제공하는 유효성 검사 옵션은 다양합니다. 예시로 required, minLength 같은 유효성 검사를 register 함수의 두 번째 매개변수로 넘겨줄 수 있습니다.

register('firstName', { required: true, minLength: 2 });

 

유효성 검사가 실패하면 에러 메시지를 반환하며, 폼 데이터는 자동으로 검증된 후 제출됩니다.

4. 추가 기능

React Hook Form은 단순한 폼 관리뿐만 아니라 유효성 검사, 비동기 요청 처리 등 다양한 기능을 함께 제공합니다. 특히 폼 제출 시 발생할 수 있는 에러 처리를 간편하게 할 수 있으며, 리셋 및 클리어 기능 등을 통해 사용자는 데이터를 더욱 유연하게 관리할 수 있습니다.

결론

React-Hook-Form은 비제어 컴포넌트를 기반으로 폼 데이터를 관리하는 훅을 제공합니다. 이 훅을 사용하면 폼 관리의 복잡성을 줄이고, 성능을 최적화하며, 사용자는 간단하게 폼을 제출하고 유효성 검사를 적용할 수 있습니다. 실제 프로젝트에서 비제어 컴포넌트와의 조합으로 효율적인 폼 구성을 만들어 나갈 수 있을 것입니다.