[React-Hook-Form] react-hook-form 라이브러리에 대해 배워보자

1) react-hook-form 이란?

React Hook Form (TypeScript)

React Hook Form은 TypeScript로 빌드되었으며, FormData 유형을 정의하여 form 값을 지원할 수 있다.

⇒ 리액트에서 form으로 작업하기에 가장 좋은 최고의 라이브러리 😎

 

사용하기 쉬운 유효성 검사를 통해 성능이 뛰어나고 유연하며 확장 가능한 form이다.

즉, 많은 form들을 관리해야 하거나, 검증 과정을 거치는데 시간과 코드를 절약할 수 있다 ⭐️

 

react-hook-form은 form에서 사용될 많은 state와, 데이터의 타입을 체크하고 조건을 확인하는 검증(Validation) 과정을 줄여준다 !

 

1-1) react-hook-form을 사용하지 않은 경우

1-2) react-hook-form을 사용한 경우

위와 같이 useForm이라는 hook을 import 해준 뒤, useForm에서 제공하는  register 함수를 사용하여 state(toDo), onChange 이벤트 등을 대체할 수 있다 !

 

2) register Function ⭐️⭐️⭐️⭐️⭐️⭐️

💡 register: (name: string, RegisterOptions?) => ({ onChange, onBlur, name, ref })

 

이 메서드를 사용하면 input을 등록하거나 element를 선택하고 유효성 검사 규칙을 React Hook Form에 적용할 수 있다.

 

유효성 검사 규칙은 모두 HTML 표준을 기반으로 하며 사용자 지정 유효성 검사 방법(validate, setError)도 허용한다.

 

useForm 훅은 ‘register’함수를 제공해주는데, 이 함수를 사용하면 state와 onChange 이벤트 핸들러를 사용할 필요가 없다.

 

💡 spread operator(…) : 반복 가능한(iterable) 객체에 적용할 수 있는 문법입니다. 배열이나 문자열 등을 풀어서 요소 하나하나로 전개시킬 수 있습니다.

사용법 : input의 prop으로 객체를 만들고, 그 안에 register함수를 spread(…)해서 넣어준다.

⇒ register 함수가 반환하는 객체를 가져다가 input의 prop으로 전달해준다. 즉, register로 상태(State)를 만들어준다 !

 

register(”toDo”)의 반환 객체의 값

👉🏻 register함수의 반환 값 : { name(Value) / onBlur 이벤트 / onChange 이벤트 / ref }

 

💡 onFocus : 포커스를 받은 경우 이벤트 설정
     onBlur : 포커스가 해지될 때 이벤트 설정

 

3) Watch Function

💡 watch: (names?: string | string[] | (data, options) => void) => unknown

 

input의 변화를 구독한다. watch() 메서드는 지정된 input을 감시하고 해당 값을 반환한다.

input 값을 렌더링하고 조건에 따라 무엇을 렌더링할지 결정하는 데 유용하다.

 

watch() 함수의 반환 값

watch란 form의 입력 값들의 변화를 관찰할 수 있게끔 해주는 함수이다.

위와 같이 watch 함수는 현재 관리되고 있는 form의 state의 값들을 담고 있는 객체를 반환한다 !

 

4) handleSubmit Function

💡 handleSubmit: ((data: Object, e?: Event) => void, (errors: Object, e?: Event) => void) => Function

 

handleSubmit 함수는 form 유효성 검사가 성공하면 'form 데이터'를 받는다 !

 

handleSubmit 함수는 검증(Validation),event.preventDefault() 등을 담당한다.

handleSubmit은 2개의 인자를 받는데, 첫 번째로 데이터가 유효할 때 호출되는 함수이고, 두 번째는 데이터가 유효하지 않을 때 호출되는 함수이다.

 

유저가 submit을 하면, handleSubmit은 해야하는 모든 검증과 일들을 마친 후에, 데이터가 유효할 때만 onValid함수를 호출한다.⭐️⭐️

 

 

5) register 함수에서 검증하는 방법

register의 두번째 인자인 객체에 검증해야 하는 조건을 적어주면 된다.

register의 두번째 인자로 조건들을 담고 있는 객체를 넘겨주면 HTML에 의지하는 대신, JS에서 Form에 대한 검증을 할 수 있다.

 

👉🏻 또한, 값이 유효하지 않은 경우 키보드와 마우스를 유효하지 않은 항목으로 바로 “Focus”시켜준다 !

 

또한, 'required : true' 대신 'required : "This is required !"'와 같이 조건이 만족되지 않았을 경우에 에러를 발생시킴과 동시에 메세지(Message)를 전달할 수 있다.

 

즉, 조건에 값을 넣어줄 수도 있지만, ‘문자열’이나 ‘객체(value/message)’를 넣어줌으로써 "에러 메세지"를 전달할 수 있다 📝

 

6) validate Option

validate 옵션은 값(value)를 인자로 받고 검증을 통과 했는지에 따라서 true/false 또는 문자열(에러 메세지)을 반환한다 !

 

이는 하나의 함수 또는 여러 함수가 있는 객체가 될 수 있는데, input에 여러 개의 검사가 필요할 수도 있기 때문이다.

 

또한 함수의 앞에 ‘async’를 붙임으로써 비동기를 만들어 서버에다 확인하고 응답을 받을 수 있다.

 

7) Validation with Regular Expression(정규식을 활용한 검증)

또 다른 검증 방법으로는 정규 표현식(Regular expression)이 있다.

 

register의 두번째 인자로 ‘pattern’이라는 값을 넣어주면 정규 표현식을 사용할 수 있다 !

정규 표현식 또한 표현식만 전달해주는 것이 아니라, ‘객체(value/message)’를 전달해줌으로써 에러 메세지를 전달해줄 수 있다 😎

 

8) Custom Validation With setError(setError를 활용한 자체 검증)

우리는 위에서 다룬 검증방법을 제외하고, 우리가 만든 규칙에 따라 검증할 수 있다 !

💡 Error를 임의로 발생시키는 방법 ?

 

먼저 useForm 훅으로부터 ‘setError’를 가져와야 한다. 이는 특정한 에러를 발생 시키도록 한다. setError는 발생하는 문제에 따라 추가적으로 에러를 설정할 수 있게 도와준다.

 

유효 함수에 조건문을 작성하여 setError 함수를 실행한다.(이때 첫번째 인자로 값의 이름을 넣고 두번째 인자로 메세지가 담긴 객체를 담는다.)

 

또한 setError의 인자로 {shouldFocus:true}를 전달함으로써 form에서 우리가 고른 input 항목에 강제로 focus 시킬 수 있다.

 

그리고 추가적인 에러가 필요하다면 항목의 이름을 새로 지어주고 사용할 수 있다.

 

9) formState

formState를 사용하면, formState.errors를 통해 에러의 존재여부와 어떤 종류의 에러인지 까지 알 수 있다 !

 

즉, 에러가 발생한 값(Value)과 에러의 타입(type), 에러메세지(message)를 반환한다. ⭐️⭐️⭐️

 

10) setValue

💡 setValue: (name: string, value: unknown, config?: Object) => void

 

필드 값을 업데이트한다. 이 함수을 사용하면 등록된 필드의 값을 동적으로 설정하고 form state를 확인하고 업데이트하는 옵션을 가질 수 있다.(동시에 불필요한 rerender를 피하려고 사용한다.)