2023-10-24-Front-End-react-hook-form 더 알아보기

저번시간에 useForm의 “onBlur” 모드를 살펴보았는데, react-hook-form을 사용하면서 그 동작 방식이 잘 이해되지 않았다. 그래서 오늘은 react-hook-form에서 제공하는 주요 기능 및 hook들에 대해서 알아보겠다.

1. useForm({ mode: “onBlur” })

2. register

register 함수는 입력 필드를 등록하여 react-hook-form이 해당 필드의 상태를 추적하고 유효성 검사를 수행할 수 있도록 한다.
예를 들어,

const userName = {
  required: "필수 필드입니다.",
};

...

{...register("name", userName)}

위 코드는 “name”필드를 등록하고, 해당 필드의 이름을 “name”으로 설정하며, userName객체는 필드의 유효성 검사 규칙을 정의한다.

3. handleSubmit

<form onSubmit={handleSubmit(onSubmit)}>

위 코드와 같이 onSubmit 함수가 제출(submit)될 때 실행된다.

4. FormState

formState 객체는 현재 폼 상태에 대한 정보를 포함한다. 여기서 errors 속성은 현재 입력 필드에서 발생한 유효성 검사 오류를 포함하고 있다.

5. reset

오늘은 간략하게 react-hook-form에서 제공하는 주요 기능들과 hook들에 대해 알아보았다. react-hook-form을 사용하면 간단하게 form을 생성할 수 있는만큼, 앞으로 적극적으로 활용해보아야겠다. 😊

참고