1. 라이브러리 설치
npm install react-hook-form
- 위 명령어를 사용하여 react-hook-form 라이브러리를 설치합니다.
2. 라이브러리 호출
import { useForm } from 'react-hook-form';
- useForm 훅을 가져와서 폼 유효성 검사와 관리를 할 수 있도록 합니다.
3. 컴포넌트 생성 및 폼 초기화
const { register, handleSubmit, formState: { errors }, reset } = useForm({ mode: 'onChange' });
| register | 각 input 필드를 react-hook-form과 연결합니다. |
| handleSubmit | 폼 제출 시 실행할 콜백 함수를 설정합니다. |
| errors | 유효성 검사 실패 시 발생하는 오류 정보를 담고 있습니다. |
| reset | 폼 초기화를 담당하는 함수입니다. |
| mode: 'onChange' | 사용자가 input 필드에 입력할 때마다 유효성 검사가 이루어지도록 설정합니다. |
4. 유효성 검사 규칙 정의
const userEmail = { required: '필수 필드입니다.' };
const userName = { required: '필수 필드입니다.' };
const userPassword = {
required: '필수 필드입니다.',
minLength: { value: 6, message: '최소 4자리로 입력해 주세요.' },
};
각 필드에 대한 유효성 검사 규칙을 정의합니다.
- required : 필수 입력 여부를 지정합니다.
- minLength : 비밀번호 입력 시 최소 길이를 제한합니다.
5. onSubmit 함수 정의
const onSubmit = ({ email, password, name }) => {
reset();
};- 사용자가 폼을 제출할 때 실행되는 함수입니다.
- 제출 후 폼을 초기화하기 위해 reset()을 호출합니다.
6. 폼 UI 구성
예시
<input type='email' {...register('email', userEmail)} />
{errors?.email && <span className='text-red-500'>{errors.email.message}</span>}- register를 사용하여 이메일 필드를 유효성 검사와 연결하고, 오류 메시지를 표시합니다.
아래 사진과 같이 입력되지 않은 항목에 대해 사용자 화면에 설정한대로 알림이 표출됩니다.
