import { useForm } from "react-hook-form";
const {
handleSubmit, // form의 onSubmit에 사용하는 함수
register, // 이벤트 객체 생성
watch, // 모든 값을 확인하는 함수
formState: { errors }, // 에러 메시지 관리
} = useForm();
= register 함수의 두 번째 파라미터인 registerOptions를 사용하면 유효성 검증 가능
// React Hook Form과 SubmitHandler를 임포트합니다.
import { useForm, SubmitHandler } from "react-hook-form";
// 폼 입력값의 타입을 정의하는 인터페이스를 선언합니다.
interface IFormInput {
firstName: string;
lastName: string;
age: number;
}
// 기본 컴포넌트 함수를 정의합니다.
export default function App() {
// useForm 훅을 호출하여 폼 관련 메서드와 변수를 가져옵니다.
// 여기서는 IFormInput 인터페이스를 타입으로 사용합니다.
const { register, handleSubmit } = useForm<IFormInput>();
// 폼이 제출될 때 호출되는 함수입니다.
// data 매개변수는 폼 입력값을 포함합니다.
const onSubmit: SubmitHandler<IFormInput> = (data) => console.log(data);
// 컴포넌트의 JSX 반환값입니다.
return (
// 폼 요소를 정의합니다.
// handleSubmit 함수는 폼 제출을 처리하고, 유효성 검사를 실행합니다.
<form onSubmit={handleSubmit(onSubmit)}>
{/* 이름 입력 필드입니다. */}
{/* register 함수는 입력 필드를 폼에 등록하고, 유효성 검사를 설정합니다. */}
<input {...register("firstName", { required: true, maxLength: 20 })} />
{/* 성 입력 필드입니다. */}
{/* 패턴을 사용하여 알파벳 문자만 허용합니다. */}
<input {...register("lastName", { pattern: /^[A-Za-z]+$/i })} />
{/* 나이 입력 필드입니다. */}
{/* 최소값과 최대값을 설정합니다. */}
<input type="number" {...register("age", { min: 18, max: 99 })} />
{/* 제출 버튼입니다. */}
<input type="submit" />
</form>
);
}
정리
<input {...register("firstName", { required: true, maxLength: 20 })} />
// required: true -> 필수 입력 값임을 나타냄
// maxLength: 20 -> 필드의 최대 길이 제한
(문자열)
<input {...register("lastName", { pattern: /^[A-Za-z]+$/i })} />
// pattern: /^[A-Za-z]+$/i (정규 표현식 사용)
-> ^ -> 문자열의 시작 의미
-> [A-Za-z] -> 대문자, 소문자 (a-z)로 이루어진 문자 집합 의미
-> + -> 하나 이상의 문자가 포함되어야 함을 의미
-> $ -> 문자열의 끝을 의미
-> /i -> 대소문자를 구분하지 않는다는 옵션
<input type="number" {...register("age", { min: 18, max: 99 })} />
min -> 최소 값
max -> 최대 값
(정수, 소수)
이메일 검증 정규식
정규식: /^\S+@\S+\.\S+$/
^: 문자열의 시작을 나타냅니다.
\S+: 공백이 아닌 문자 하나 이상을 나타냅니다. 여기서 \S는 공백이 아닌 모든 문자를 의미하며, +는 하나 이상을 의미합니다.
@: 이메일 주소에서 사용하는 @ 문자를 나타냅니다.
\S+: 다시 공백이 아닌 문자 하나 이상을 나타냅니다.
.: .(점) 문자를 나타냅니다. 여기서 .는 일반적으로 모든 문자를 의미하지만, \를 붙여서 문자 그대로의 점을 의미합니다.
\S+: 마지막으로 공백이 아닌 문자 하나 이상을 나타냅니다.
$: 문자열의 끝을 나타냅니다.
=이 정규식은 공백이 아닌 문자로 시작해서 @ 문자가 나오고, 그 뒤에 공백이 아닌 문자가 나오고, 점(.)이 하나 있고, 그 뒤에 다시 공백이 아닌 문자가 나오는 형식을 의미합니다.
비밀번호
비밀번호 검증 정규식
정규식: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/
^: 문자열의 시작을 나타냅니다.
(?=.*[a-z]): 소문자 알파벳이 적어도 하나는 포함되어야 함을 의미합니다. 여기서 (?=.*[a-z])는 앞으로 소문자 알파벳이 하나 이상 나와야 한다는 뜻입니다.
(?=.*[A-Z]): 대문자 알파벳이 적어도 하나는 포함되어야 함을 의미합니다.
(?=.*\d): 숫자가 적어도 하나는 포함되어야 함을 의미합니다. 여기서 \d는 숫자를 의미합니다.
(?=.[@$!%?&]): 특수문자(@, $, !, %, *, ?, &) 중 적어도 하나는 포함되어야 함을 의미합니다.
[A-Za-z\d@$!%*?&]: 소문자, 대문자 알파벳, 숫자, 특수문자(@, $, !, %, *, ?, &)의 집합을 의미합니다. 이 집합 내의 문자들만 허용됩니다.
{8,}: 앞의 집합이 8개 이상 포함되어야 함을 의미합니다.
$: 문자열의 끝을 나타냅니다.
해석:
이 정규식은 비밀번호가 다음 조건들을 만족해야 함을 나타냅니다:
적어도 하나의 소문자 알파벳(a-z)
적어도 하나의 대문자 알파벳(A-Z)
적어도 하나의 숫자(0-9)
적어도 하나의 특수문자(@, $, !, %, *, ?, &)
최소 8자 이상
npm install @hookform/error-message
# or
pnpm add @hookform/error-message
# or
yarn add @hookform/error-message
import { useForm, SubmitHandler, useWatch } from "react-hook-form";
import { ErrorMessage } from "@hookform/error-message";
interface IFormInput {
password: string;
passwordConfirm: string;
}
export default function App() {
// useForm 훅을 호출하여 폼 관련 메서드와 변수를 가져옵니다.
// 여기서는 IFormInput 인터페이스를 타입으로 사용합니다.
const {
register, // 입력 필드를 폼에 등록하기 위한 함수입니다.
handleSubmit, // 폼 제출을 처리하고, 유효성 검사를 실행하는 함수입니다.
control, // useWatch 훅을 사용하기 위해 필요한 객체입니다.
formState: { errors } // 폼의 유효성 검사 에러 정보를 포함합니다.
} = useForm<IFormInput>();
// useWatch 훅을 사용하여 password 필드의 값을 실시간으로 감시합니다.
const password = useWatch({
control, // useWatch 훅은 control 객체를 필요로 합니다.
name: "password" // 감시할 필드의 이름을 지정합니다.
});
// 폼이 제출될 때 호출되는 함수입니다.
// data 매개변수는 폼 입력값을 포함합니다.
const onSubmit: SubmitHandler<IFormInput> = (data) => console.log(data);
return (
// 폼 요소를 정의합니다.
// handleSubmit 함수는 폼 제출을 처리하고, 유효성 검사를 실행합니다.
<form onSubmit={handleSubmit(onSubmit)}>
<input
// password 필드를 폼에 등록하고 유효성 검사를 설정합니다.
{...register("password", {
required: "필수 값입니다.", // 필수 입력 필드임을 정의합니다.
minLength: {
value: 7,
message: "최소 7자 이상 입력해 주세요." // 최소 길이를 7자로 설정하고 에러 메시지를 정의합니다.
}
})}
/>
{/* password 필드에 에러가 있을 경우 에러 메시지를 출력합니다. */}
<ErrorMessage name="password" errors={errors} as="span" />
<input
// passwordConfirm 필드를 폼에 등록하고 유효성 검사를 설정합니다.
{...register("passwordConfirm", {
required: "필수 값입니다.", // 필수 입력 필드임을 정의합니다.
validate: (value) =>
value === password ? true : "비밀번호를 확인해 주세요." // password 필드의 값과 일치하는지 확인합니다.
})}
/>
{/* passwordConfirm 필드에 에러가 있을 경우 에러 메시지를 출력합니다. */}
<ErrorMessage name="passwordConfirm" errors={errors} as="span" />
{/* 폼 제출 버튼입니다. */}
<input type="submit" />
</form>
);
}
라이브러리 안 쓴 코드랑 다른 점
안 씀
import { useForm, SubmitHandler, useWatch } from "react-hook-form";
// 에러 메시지를 직접 조건부 렌더링으로 표시
{errors.password && <span>{errors.password.message}</span>}
{errors.passwordConfirm && <span>{errors.passwordConfirm.message}</span>}
씀
import { useForm, SubmitHandler, useWatch } from "react-hook-form";
import { ErrorMessage } from "@hookform/error-message";
// 에러 메시지를 ErrorMessage 컴포넌트를 사용하여 표시
<ErrorMessage name="password" errors={errors} as="span" />
<ErrorMessage name="passwordConfirm" errors={errors} as="span" />
//name 속성은 폼 필드의 이름 지정 (useForm 훅에서 등록된 필드 이름과 일치해야)
//errors={errors} 속성은 useForm 훅에서 제공하는 errors 객체 전달, 모든 폼 필드의 유효성 검사 에러 포함
//ErrorMessage 컴포넌트는 이 객체에서 name 속성으로 지정된 필드의 에러 메세지를 찾아서 표시
//as='span' 속성은 ErrorMessage가 어떤 html 요소로 렌더링될지를 지정함
if -> 알람 라이브러리를 사용한다면
import React from 'react';
import { useForm, SubmitHandler } from "react-hook-form";
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
interface IFormInput {
password: string;
passwordConfirm: string;
}
export default function App() {
const {
register,
handleSubmit,
formState: { errors }
} = useForm<IFormInput>();
const onSubmit: SubmitHandler<IFormInput> = (data) => {
console.log(data);
};
React.useEffect(() => {
if (errors.password) {
toast.error(errors.password.message); // 에러 메시지를 토스트로 표시
}
if (errors.passwordConfirm) {
toast.error(errors.passwordConfirm.message); // 에러 메시지를 토스트로 표시
}
}, [errors]);
return (
<div>
<form onSubmit={handleSubmit(onSubmit)}>
<input
{...register("password", {
required: "필수 값입니다.",
minLength: {
value: 7,
message: "최소 7자 이상 입력해 주세요."
}
})}
/>
<input
{...register("passwordConfirm", {
required: "필수 값입니다.",
validate: (value) =>
value === watch("password") ? true : "비밀번호를 확인해 주세요."
})}
/>
<input type="submit" />
</form>
<ToastContainer /> {/* 알람이 화면에 표시될 수 있도록 설정 */}
</div>
);
}
