React Hook Form 공부 - 10 FormValues 항목에서 문자열이 아닌 number 타입이나 date 타입 사용하기지금까지 FormValues 항목에는 전부 string 즉, 문자열 타입만 작성했는데요. 이제는 number 타입이나 date 타입도 작성해 보겠습니다. 코드의 간결함을 위해 불필요한 거는 주석 처리 하겠습니다. import { useForm, useFieldArray } from 'react-hook-form'import { DevTool } from '@hookform/devtools'let renderCount = 0type FormValues = { username: string, age: number, dob: Date,}export default function..

React Hook Form 공부 - 9 useFieldArray 함수로 즉석에서 FormValues 항목 늘리고 줄이기phoneNumbers는 딱 2개만 입력받을 수 있게 지정했는데요. React-Hook-Form에는 useFieldArray라는 강력한 함수를 제공해 줍니다. UI상에서 가변적으로 입력 항목을 늘리고 줄일 수 있는데요. phNumbers라는 항목으로 예제를 만들어 보겠습니다.type FormValues = { username: string; email: string; social: { github: string; twitter: string; }; phoneNumbers: string[]; phNumbers: { number: string; }[];};exp..

React Hook Form 공부 - 8 FormValues 항목에 배열이 있는 경우우리가 얻고자 하는 폼에 관련 정보가 유사성이 있으면 객체 말고 배열로 받고 싶은 경우가 있습니다. 전화번호가 대표적인데요. 유선, 무선 전화번호를 phoneNumbers라는 항목으로 배열로 지정하여 코드를 작성해 보겠습니다. type FormValues = { username: string; email: string; social: { github: string; twitter: string; }; phoneNumbers: string[];};export default function MyForm() { const { register, control, handleSubmit, ..

React Hook Form 공부 - 7 FormValues 항목에 중첩된 객체가 있는 경우FormValues 항목에 중첩된 우리가 폼으로 입력받고 싶은 항목을 FormValues 타입으로 정의했었는데요. 어떨 경우는 FormValues 타입에 중첩된 객체(Nested Object)를 사용해야 할 경우가 있습니다. 이런 경우 어떻게 사용하는지 살펴보겠습니다. 코드의 간편함을 위해 password 항목을 삭제하겠습니다. type FormValues = { username: string; email: string; social: { github: string; twitter: string; };};export default function MyForm() { const { regis..

React Hook Form 공부 - 7 useForm 함수의 defaultValues 알아보기우리가 만들려고 하는 폼의 input 칸에 기본 값을 넣는 방법이 있습니다. 바로 defaultValues 값을 넣어주면 되는데요.const { register, control, handleSubmit, formState: { errors },} = useForm ({ defaultValues: { username: 'IU', email: '', password: '', },}); 만약에 defaultValues 항목에 다른 서버에서 얻은 값을 넣으려면 어떻게 할까요? defaultValues 항목에 async 함수를 넣어 주면 됩니다.const { register, control..

React Hook Form 공부 - 6 커스텀 Validation 함수 만들기React-Hook-Form이 제공하는 유효성 검증 방법 말고 개발자가 직접 Validation을 만들 수 있는데요. 바로 register 함수에서 두 번째 인자로 전달했던 그 객체 안에 validate 항목을 추가하면 됩니다 email 부분에 커스텀 validation 로직을 구현해 보겠습니다. "admin@fly.dev" 라는 이메일로는 가입을 하지 못하게 해 볼까요? { return fieldValue !== 'admin@fly.dev' || 'You can not use admin@fly.dev!' }, })}/> validate 항목은 함수인데요. 위와 같이 OR(||) 연산자를 사용합니다. OR 연산..

React Hook Form 공부 - 5 에러 메시지 표현하기에러 메시지를 표시하기 위해 React-Hook-Form에서 제공해 주는 게 바로 formState 객체인데요. 실제는 formState 안에 있는 errors 객체가 최종적으로 우리가 사용하는 겁니다. const { register, control, handleSubmit, formState } = useForm();const { errors } = formState;// 아래가 축약버전const { register, control, handleSubmit, formState: { errors }, } = useForm(); 이제 form 태그에 p 태그를 덧붙혀 보겠습니다.{errors.user..

React Hook Form 공부 - 4 유효성 검증(Validation)Form의 유효성 검증으로 React-Hook-Form이 제공하는 방법은 다음과 같습니다.총 6개 제공requiredminLength & maxLengthmin & maxpattern register 함수의 두 번째 인자로 들어갈 객체 안에 넣어주면 됩니다.먼저, 위와 같이 form에 noValidate 옵션을 주어서 HTML 기본적으로 유효성 검증하는 기능을 끄겠습니다.이렇게 하면 유효성 검증은 오로지 React-Hook-Form이 담당하게 됩니다.required 유효성 검증을 시현해 보겠습니다. register 함수 안에 넣는 인자 중 에 두 번째 인자로 객체를 넣어주고 그 안에 required 항목을 넣어주면 됩니다.그러면 아..

React Hook Form 공부 - 3 React-Hook-Form의 onSubmit 핸들러 제어 방법 보통 리액트에서는 form-submit 처리를 handleSubmit라는 이름의 함수를 만들어서 사용하는데요. react-hook-form에서도 이 이름의 함수를 사용합니다. 대신 handleSubmit 함수에는 사용자가 작성한 함수를 인자로 넣어줘야 합니다. const { register, control, handleSubmit } = useForm();const onSubmit = (data) => { console.log("Form submitted.", data)}renderCount++; return ( Render count : {renderCount / 2} ..