React Hook Form 공부 - 16 폼 Submit disabled 시키기폼의 Submit 버튼을 조건에 따라 disabled 시키는 방법입니다. 필요한 함수는 isDirty 값과 isValid 값인데요. isDirty- isDirty는 폼이 한 번이라도 수정되었는지 여부를 나타내는 속성- 폼의 초기 상태와 비교하여 한 번이라도 변경이 발생하면 true를 반환하고, 변경이 없다면 false를 반환합니다.- 이 속성은 사용자가 입력을 시작했는지, 아니면 여전히 폼이 초기 상태인지 확인하는 데 유용합니다.isValid- isValid는 폼이 유효한지 여부를 나타내는 속성- 모든 필드가 유효성 검사를 통과하면 true를 반환하고, 그렇지 않으면 false를 반환합니다.- 예를 들어, 특정 필드가 필수라..

React Hook Form 공부 - 15 handleSubmit 에러 발생시useForm() 함수가 리턴 하는 handleSubmit 함수를 이용해서 폼의 Submit 핸들링을 담당하는 함수를 지정했었습니다. 그런데, Submit이 실패했을 때도 핸들링할 수 있는 함수를 제공하는데요. handleSubmit 함수에 두 번째 인자가 폼 Submit이 실패했을 때 실행되는 콜백함수입니다 위 코드와 같이 onSubmit 함수는 우리가 Submit이 성공했을 때 작동되도록 만든 함수이고, onError 함수는 Submit이 실패했을 때 작동되도록 만들 예정인 함수입니다import { useForm, useFieldArray, FieldErrors } from "react-hook-form"; const on..

React Hook Form 공부 - 14 폼 항목 disable 하기HTML 태그에는 disabled 항목이 있는데요. 버튼에 disabled 항목이 추가되면 입력이 안 됩니다. React-Hook-Form에도 disabled 항목이 있는데요. 이 항목이 true이면, 입력도 안되고 해당 항목은 undefined가 됩니다. 그리고 해당 항목에 지정되어 있던 validation도 적용이 되지 않습니다. 그리고 disabled를 watch함수와 같이 쓸 수 있는데요. 코드를 보겠습니다. usename 항목이 비어있다면 true가 될 거고, 그러면 disabled 항목이 true가 되면서 결국 "age" 항목은 입력이 안되게 됩니다. disabled 항목 사용법은 wach 함수와 응용해서 사용하시면 됩니다.

React Hook Form 공부 - 13 touchedFields, dirtyFields, isDirty 함수 알아 보기아까 setValue 함수에서 shouldDirty, shouldTouch, shouldValidate 항목에 있는 Touched , Dirty에 대해서 다시 알아 보겠습니다. 사용자가 폼의 input에 포커스를 한 번이라도 가져갔다면 TouchhedFields 항목에 포함됩니다.그리고 dirtyFields에는 defaultValues와 다른 값이라면 그 항목은 dirtyFields 항목에 포함되죠. 그리고 isDirty는 현재의 Dirty 상태를 나타내 주죠. 사용 방법은 formState에서 각각의 항목을 디스트럭쳐링 해서 써야 합니다.const { register, c..

React Hook Form 공부 - 12 getValues, setValue 함수로 자바스크립트에서 FormValues 직접 제어하기React-Hook-Form의 useForm 함수는 getValues(), setValue() 함수도 제공합니다. 기본 형태Name | OutputgetValues() | { root: { test1: '', test2: ''} }setValue('name', 'value', { options }) setValue 옵션1. shouldValidate (boolean) => 유효성 검사를 수행할지 여부를 설정2. shouldDirty (boolean) => 필드를 'dirty' 상태로 설정할지 여부를 결정- ❓dirty 란?주로 사용자가 어떤 형태로든 입력 필드에..

React Hook Form 공부 - 11 watch를 이용해서 실시간으로 FormValues 감시하기useForm() 함수에는 watch 함수를 제공해 주는데요. 이 watch 함수를 이용하면 사용자가 현재 입력하고 있는 값을 실시간으로 감시할 수 있습니다. const { register, control, handleSubmit, watch, formState: { errors }, } = useForm({ defaultValues: { username: "IU", age: 0, dob: new Date(), }, }); const watchForm = watch("username"); const watchForm2 = watch..

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, ..