반응 형태 후크
- React Hook Form의 핵심 개념 중 하나는 후크에 구성 요소 등록만들다! 이를 통해 양식 유효성 검사 및 제출 중에 이러한 값을 사용할 수 있습니다. (공식 튜토리얼 영상에서는 이 등록 API를 Core API라고 합니다.)
- API 등록입력 태그에 등록할 prop 객체를 반환합니다. 반환된 객체를 배포하여 등록합니다.
- Register API는 useForm 후크에서 받을 수 있습니다.
- 분야별 등록 이름을 “키”로 지정있어야 한다(필요해야 한다!)
-
import { useForm } from "react-hook-form"; export default function App() { const { register, handleSubmit } = useForm(); const onSubmit = data => console.log(data); return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register("firstName")} /> <select {...register("gender")}> <option value="female">female</option> <option value="male">male</option> <option value="other">other</option> </select> <input type="submit" /> </form> ); }
- React-Hook-Form은 기존 HTML 표준 양식 유효성 검사를 따라 양식 유효성 검사를 단순화합니다.
- 아래는 react hook form이 지원하는 form validation list입니다.
- 필요한
- 최저한의
- 최대
- 최소 길이
- 최대 길이
- 무늬
- 확인하다
- 아래는 react hook form이 지원하는 form validation list입니다.
-
import { useForm } from "react-hook-form"; export default function App() { const { register, handleSubmit } = useForm(); const onSubmit = data => console.log(data); return ( <form onSubmit={handleSubmit(onSubmit)}> <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> ); }- 유효성 검사 옵션이 포함된 개체를 등록 함수의 두 번째 인수로 전달합니다.
- 핸들제출 API(검색)을 통해 배송 정보를 검색할 수 있습니다.
- useForm 후크에서 가져와서 사용할 수 있습니다.
- handlesubmit API에 전달된 콜백 함수의 첫 번째 인수를 통해 제출 값을 얻을 수 있습니다.
- FormState API를 통해 오류를 처리할 수 있습니다.
- useForm 후크에서 formState를 가져온 후 오류 개체를 사용하여 오류에 응답할 수 있습니다.
- 이때 각 필드에 validation 속성을 부여하면 메시지가 생성되고 이렇게 작성된 메시지가 error 객체로 전달된다. 예를 들어 입력 필드에 minLength 값을 지정하려는 경우 `최소 길이: 4` in 과 같이 값을 전달하는 대신 메시지가 객체 형태로 전달됩니다. `최소 길이: {값: 4, 메시지: ‘ㅋㅋㅋㅋ’}`
- 참고로 위 사진에 적용된 CSS 효과는 미리 만들어진 styles.css에서 가져온 것입니다. 양식 유효성 검사를 통해 유효성 검사를 수행하고 메시지가 오류에 대응할 수 있도록 미리 오류에 대한 메시지를 준비하는 것입니다.
- 초기값으로 설정할 객체 데이터를 useForm 후크에 전달하여 각 필드의 초기값을 설정할 수도 있습니다.
- API 보기모든 필드 또는 특정 필드의 변경 사항을 감지하여 값을 얻을 수 있습니다.
'추천 관련글,
- Watch API에 아무것도 전달되지 않으면 등록된 모든 필드의 변경 사항이 개체 데이터로 수신됩니다.
- 하나 이상의 필드를 모니터링하려면 어레이 데이터에 각 필드의 레지스터 이름을 입력하십시오.
우선 공식 문서의 설명을 바탕으로 작성했습니다.
좀 지루해져서 직접 만들어서 확인해봐야겠습니다.
먼저 Theme는 공식 React-Hook-Form 웹사이트의 Quick Start 탭에 제공되는 Codesandbox의 스타일 코드를 가져왔습니다.
// 예제 1
function SignUpForm() {
const {
register,
handleSubmit,
formState: { errors },
} = useForm()
function onSubmitForm (data) {
console.log(data)
}
return (
<div>
<h1>React-Hook-Form</h1>
<form onSubmit={handleSubmit(onSubmitForm)}>
<label htmlFor="email">ID</label>
<input id="email" {...register("email", { required: true })} />
{errors.email && <p>필수 입력 항목입니다.</p>}
<input type="submit" />
</form>
</div>
)
}양식 내의 요소를 등록하고 간단한 유효성 검사 및 제출 테스트를 수행하기 위해 useForm 후크에서 register, handleSubmit 및 formState를 얻었습니다.
이메일 값을 얻기 위해 입력 태그를 삽입하고 필수 속성을 사용하여 유효성을 검사하고 보낼 때 데이터가 잘 수신되는지 확인하십시오.
음… 잘 작동합니다.
이제 양식에 더 가까운 요소를 추가해 보겠습니다.
// 예제 2
function SignUpForm() {
const {
register,
handleSubmit,
formState: { errors },
} = useForm()
function onSubmitForm(submitData) {
console.log(submitData)
}
return (
<div>
<h1>React-Hook-Form</h1>
<form onSubmit={handleSubmit(onSubmitForm)}>
<label htmlFor="email">이메일</label>
<input
id="email"
{...register("email", {
required: "필수 입력 항목입니다.",
pattern: {
value:
/^(0-9a-zA-Z)((-_.)?(0-9a-zA-Z))*@(0-9a-zA-Z)((-_.)?(0-9a-zA-Z))*.(a-zA-Z){2,3}$/i,
message: "올바르지 않은 이메일 형식입니다.",
},
})}
/>
{errors.email && <p>{errors.email.message}</p>}
<label htmlFor="id">아이디</label>
<input
id="id"
{...register("id", {
required: "필수 입력 항목입니다.",
pattern: {
value: /^(a-z)+(a-z0-9){5,19}$/g,
message: "영문자로 시작하는 영문자 또는 숫자 6~20자로 입력하세요",
},
})}
/>
{errors.id && <p>{errors.id.message}</p>}
<label htmlFor="password">비밀번호</label>
<input
type="password"
id="password"
{...register("password", {
required: "필수 입력 항목입니다.",
pattern: {
value: /^(?=.*\d)(?=.*(a-zA-Z))(0-9a-zA-Z){8,16}$/,
message: "8 ~ 16자 영문, 숫자를 조합하세요",
},
})}
/>
{errors.password && <p>{errors.password.message}</p>}
<label htmlFor="password_check">비밀번호 확인</label>
<input
type="password"
id="password_check"
{...register("password_check", { required: "필수 입력 항목입니다." })}
/>
{errors.password_check && <p>{errors.password_check.message}</p>}
<input type="submit" />
</form>
</div>
)
}양식은 4개의 입력을 허용합니다. 이메일, 아이디, 비밀번호, 비밀번호 확인 각 입력에는 서로 다른 유효성 검사가 필요하며 그에 따라 오류 메시지가 표시되어야 합니다. 맞습니까?
그러나 예제 1과 같이 코드를 작성하면 필수 속성에 대한 오류 메시지만 표시할 수 있습니다.
이를 해결하기 위해 등록 기능에서 유효성 기준이 되는 값을 생성하고 해당 유효성이 충족되지 않으면 오류 메시지를 표시할 수 있습니다.
그후에 `오류가 발생한 곳의 errors.input.message` 로 오류 메시지를 참조하여 렌더링할 수 있습니다.
예제 2에서는 값 및 메시지와 함께 각 입력에 대해 필수 유효성 검사 속성이 작성되었습니다.
상황에 맞는 에러 메시지가 출력되는지 확인할 수 있습니다.
이제 암호 확인이 작동하도록 코드를 작성해 보겠습니다.
function SignUpForm() {
const {
register,
handleSubmit,
formState: { errors },
watch,
} = useForm({
defaultValues: {
email: "",
},
})
// password를 watch하고 값을 갱신
const password = useRef()
password.current = watch("password")
function onSubmitForm(submitData) {
console.log(submitData)
}
return (
<div>
<h1>React-Hook-Form</h1>
<form onSubmit={handleSubmit(onSubmitForm)}>
<label htmlFor="email">이메일</label>
<input
id="email"
{...register("email", {
required: "필수 입력 항목입니다.",
pattern: {
value:
/^(0-9a-zA-Z)((-_.)?(0-9a-zA-Z))*@(0-9a-zA-Z)((-_.)?(0-9a-zA-Z))*.(a-zA-Z){2,3}$/i,
message: "올바르지 않은 이메일 형식입니다.",
},
})}
/>
{errors.email && <p>{errors.email.message}</p>}
<label htmlFor="id">아이디</label>
<input
id="id"
{...register("id", {
required: "필수 입력 항목입니다.",
pattern: {
value: /^(a-z)+(a-z0-9){5,19}$/g,
message: "영문자로 시작하는 영문자 또는 숫자 6~20자로 입력하세요",
},
})}
/>
{errors.id && <p>{errors.id.message}</p>}
<label htmlFor="password">비밀번호</label>
<input
type="password"
id="password"
{...register("password", {
required: "필수 입력 항목입니다.",
pattern: {
value: /^(?=.*\d)(?=.*(a-zA-Z))(0-9a-zA-Z){8,16}$/,
message: "8 ~ 16자 영문, 숫자를 조합하세요",
},
})}
/>
{errors.password && <p>{errors.password.message}</p>}
<label htmlFor="password_check">비밀번호 확인</label>
<input
type="password"
id="password_check"
{...register("password_check", {
required: "필수 입력 항목입니다.",
validate: (value) =>
value === password.current || "비밀번호가 일치하지 않습니다.",
})}
/>
{errors.password_check && <p>{errors.password_check.message}</p>}
<input type="submit" />
</form>
</div>
)
}먼저 watch API에는 비밀번호 입력의 입력 값이 포함되어 있습니다. 이 시점에서 state가 아닌 useRef를 통해 관리됩니다.
이렇게 얻은 값을 이용하여 password_check의 validate 속성에 작성된 validation 함수에 의해 validation이 수행됩니다. 이 함수는 유효성 검사가 충족되면 true를 반환하고, 그렇지 않으면 인쇄에 대한 오류 메시지를 작성합니다.
이 방법으로 우리는 매우 간단한 React 후크 형식을 살펴보고 UI 라이브러리와 함께 사용할 수 있는 useController 후크와 같은 많은 후크가 있습니다. AZ는 잘 몰랐지만 충분히 매력적인 라이브러리라고 생각합니다. (라이브러리의 도움을 받지 않고 빌드하는 것을 생각하면 코드의 양이 늘어나겠죠…)
나중에 기회가 된다면 React-Hook-Form 라이브러리의 다양한 기능을 공부하고 최적화 과정을 시도해보는 것도 재미있을 것 같습니다.