[React Hook Form] React Hook Form 공부 - 7 (useForm 함수의 defaultValues 알아보기) [7/25 study]

React Hook Form 공부 - 7

 

useForm 함수의 defaultValues 알아보기

우리가 만들려고 하는 폼의 input 칸에 기본 값을 넣는 방법이 있습니다. 바로 defaultValues 값을 넣어주면 되는데요.

const {
  register,
  control,
  handleSubmit,
  formState: { errors },
} = useForm <
FormValues >
({
  defaultValues: {
    username: 'IU',
    email: '',
    password: '',
  },
});

 

만약에 defaultValues 항목에 다른 서버에서 얻은 값을 넣으려면 어떻게 할까요? 

defaultValues 항목에 async 함수를 넣어 주면 됩니다.

const {
  register,
  control,
  handleSubmit,
  formState: { errors },
} = useForm <
FormValues >
{
  defaultValues: async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/users/1')
    const data = await response.json()
    return {
      username: data.username,
      email: data.email,
      password: '',
    }
  },
}

 

결과