[React] React Hook Form으로 간단하게 리액트에서 폼 사용하기

React Hook Form

  리액트에서 폼을 관리하는 것은 생각보다 귀찮은 작업이다. Input Validation, Form Submit 등의 작업을 수행하다보면 별 거 아닌 기능에도 코드가 매우 길어지는 것을 볼 수 있을 것이다. 다행히 React-Hook-Form이라는 라이브러리를 사용하면 ReactJS와 React Native 애플리케이션을 구현할 때 매우 적은 양의 코드로도 손쉽게 폼을 관리할 수 있다.

 

장점

  (사실 React Hook Form은 공식 사이트에서 워낙 장점을 잘 표현해놔서 직접 확인하는 것을 추천한다. 공식 사이트 링크는 위에 있다.)

(1) 코드를 적게 작성해도 된다.

(2) 렌더링 관점에서 효율적이다. (폼 내에서 리렌더링이 발생할 때 최소한의 리렌더링만을 수행한다. 예를 들어서 특정 input에 대해 입력을 진행했을 때 다른 input들은 리렌더링이 이루어지지 않는다.)

(3) 컴포넌트 마운트 속도가 빠르다.

 

 

대표적인 메소드

  React Hook Form에서 제공하는 기능들은 useForm 훅의 반환값에서 추출하여 사용할 수 있다. 대표적인 React Hook Form에서 제공하는 기능들은 다음과 같다.

 

1. register

  register을 사용하면 ref를 통해 입력 element를 훅과 연결하여 그 값을 획득하고 유효성 검사(Validation Check)를 수행할 수 있다. 스프레드 연산자를 사용하면 편하게 사용이 가능하며 첫 번째 파라미터로는 input의 name을, 두 번째 파라미터로는 register option을 전달받는다. input name은 form에서 각 input을 구별할 수 있게 해주는 고유한 key값이기 때문에 유효한 값이며 겹쳐서는 안 된다. register option을 활용하면 편리하게 input value의 validation을 수행할 수 있으며 지정할 수 있는 옵션들은 다음과 같다. 만약 register option을 지키지 않을 경우 useForm의 errors를 통해 그 내용을 확인할 수 있다.

(1) required (boolean) : required 여부 지정

(2) maxLength / minLength (number) : 최대/최소 길이

(3) max / min (number) : 최대/최소 값 (input type="number"인 경우)

(4) pattern (RegExp) : 입력값의 정규식 패턴 지정

(5) validation : 입력값이 유효한지 검사하는 validation function으로 검사 콜백 함수 하나를 넘겨주거나 만약 콜백 함수가 여러 개인 경우 콜백 함수의 이름을 키로 가지는 콜백 함수들의 객체를 값으로 넣어줄 수 있다.

 

2. handleSubmit

  handleSubmit은 form의 submit 동작을 편리하게 처리할 수 있도록 만들어진 메소드로 두 개의 콜백 함수를 파라미터로 가진다. 첫 번째는 submit이 가능할 때, 즉 useForm에서 확인했을 때 error이 하나도 없는 경우에 실행되는 onSubmit 함수로 각 input의 name과 value를 key-value 쌍으로 가지는 object를 파라미터로 전달받는다. 두 번째 콜백 함수인 onError은 optional이며 에러가 존재할 경우 그 error 객체를 파라미터로 전달받는다. handleSubmit은 form element의 onSubmit={handleSubmit(onSubmit, onError)}과 같은 방식으로 사용할 수 있다. 참고로 React Hook Form을 사용하면 onSubmit에서 event.preventDefault( ) 메소드를 호출하지 않아도 된다. 폼을 사용하다 보면 validation check로 인해 event.preventDefault( ) 메소드를 사용하지 않는 경우가 거의 존재하지 않는데 개인적으로 제일 매력적인 점 중 하나인 것 같다.

 

3. errors

  errors는 각 input에 해당하는 에러를 담는 객체이다. handleSubmit의 두 번째 파라미터인 onError 콜백함수의 파라미터를 통해 접근하거나 혹은 useForm( ) 훅의 리턴값 중 formState에 담긴 errors를 통해 submit 액션이 이루어지지 않았을 때에도 접근할 수 있다. errors는 input name을 키로 error 객체를 value로 가지는 객체의 형태를 띄고 있으며 각각의 에러는 다음과 같은 프로퍼티를 가진다.

(1) type (string) : 에러의 타입 (ex. required, min, max)

(2) types (Record<{string, string | boolean}>) : type을 사용하면 한 input당 하나의 에러만을 확인할 수 있지만 types를 활용하면 레코드의 형태로 input에 발생한 모든 error 타입을 한 번에 확인할 수 있다.

(3) message (string | React.ReactElement) : 메시지는 기본적으로 빈 문자열이지만 register option에서 해당 에러 타입에 대한 메시지를 미리 지정해둔 경우 해당 메시지가 출력된다.

(4) ref (React.Ref) : 해당 input element에 대한 ref

 

4. watch

  watch는 register을 통해 지정해준 input의 value를 확인할 수 있게 해준다. watch 함수는 확인할 input의 name을 string 혹은 확인할 input이 여러 개인 경우 string 배열의 형태로 입력받는다. 만약 탐색할 input name을 인자로 넘겨주지 않는다면 register된 모든 input의 value가 리턴된다. watch 함수의 반환값은 확인하는 input의 name을 key값으로 가지고 해당 input의 value를 value로 가지는 형태를 띄는 object이다.

 

 

활용 예시

  다음은 React Hook Form을 통해 구현한 간단한 회원가입 폼의 예시이다.