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

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