React-Hooks-Form 톺아보기

안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하고 있습니다.

똑똑한개발자에서 사용하는 React-Hooks-Form을 간단하게 소개하려고 합니다.

‘톺아보기’ 라는 말을 오픈사전에서 찾아보면

1. 가파른 곳을 오르려고 매우 힘들여 더듬다
2. 틈이 있는 곳마다 모조리 더듬어 뒤지면서 찾다

정도의 의미로 볼 수 있습니다. 개발을 하며 겪는 모든 과정이 오류와 버그들을 ‘목표를 향해 가기 위해 매우 힘들여 더듬고, 모조리 더듬어 찾는’ 일련의 과정이라고 생각합니다.

그런 의미에서 오늘은 React-Hooks-Form을 톺아보도록 하겠습니다.

사용을 해봤지만, 많은 기능을 제공하고 있는 라이브러리이므로,

간단한 예제를 보신 후에 공식문서를 참고하시는것을 권해드립니다.

React-Hooks-Form

프로덕트를 개발하며 회원가입, 주소입력 등의 폼 또는 양식을 구현하다보면,

생각지도 못한 것들을 만나게 되고, 그 과정들에서 우리는 좌절을 겪습니다.

이것을 좀 더 쉽게 처리할수있게 도와주는 라이브러리가 바로 react-hooks-form 입니다.

시작하기 전에

예제를 보며 학습하기 전에 React-hooks-form의 몇 가지 특징을 살펴보겠습니다.

• hooks API
  React-hooks-form 이라는 이름에서 알 수 있듯이 기본적으로 현재 리액트에서 권장하고 있는 hooks API를 사용합니다.

• 다른 라이브러리 의존성 없음
  프론트엔드 개발을 하며 다른 라이브러리를 사용하는 경우, 다른 의존성 관리를 위해 추가로 설치를 하거나 라이브러리를 위한 라이브러리를 사용해야하는 경우가 있습니다. 하지만, React-hooks-form의 폼 상태는 로컬에서 관리되기 때문에 별도로 의존성 관리를 해줄 필요가 없습니다.

• Performance

  react-hooks-form 공식문서를 살펴보면, 성능에 대해 강조하고 있습니다. form, input과 같은 형태의 컴포넌트들은 사용자의 타이핑이나 값을 변경하게 되는 경우가 잦은데, 이 과정에서 리렌더링이 필연적으로 발생하게 되어 성능에 영향을 미칩니다. react-hooks-form은 register 메서드를 ref에 등록하여 사용하기 때문에 이러한 문제를 극복할 수 있습니다.

• 타입스크립트로 작성

  타입스크립트로 작성되어 타입스크립트 프로젝트에 아주 적합합니다. 똑똑한개발자에서는

  타입스크립트 기반으로 리액트를 활용하여 개발하고 있기 때문에 예제 또한 타입스크립트 예제를 살펴보겠습니다.

설치

모든 시작은 의존성 라이브러리 설치에서 시작합니다.

본인이 사용하고 있는 패키지 관리툴에 맞는 명령어를 입력해주시면,

바로 설치가 진행됩니다.

npm install react-hook-form
yarn add react-hooks-form

한 줄로 간편하게 설치해주시면, React-hooks-form을 사용할 준비가 완료됩니다.

Example

무언가를 알아보거나 배우고 익힐 때, 가장 좋은 방법은 일단 시도해보는것입니다.

공식문서에 심플하게 나와있는 예제입니다.

예제코드를 보시면서 주석처리되어있는 부분들을 눈여겨보시면 좋습니다.

import React from "react";
import { useForm } from "react-hook-form";

type Inputs = {
  example: string,
  exampleRequired: string,
};

export default function App() {
  {/* 1. useForm(); */}
  const { register, handleSubmit, watch, formState: { errors } } = useForm<Inputs>();

  const onSubmit = data => console.log(data);

  console.log(watch("example"))

  return (
    {/* 2. handleSubmit() */}
    <form onSubmit={handleSubmit(onSubmit)}>
    {/* 3. register() */}
      <input defaultValue="test" {...register("example")} />

      {/* 4. register(required: true, pattern: '/.../') */}
      <input {...register("exampleRequired", { required: true })} />
      {/* 5. errors */}
      {errors.exampleRequired && <span>This field is required</span>}

      <input type="submit" />
    </form>
  );
}

1. useForm()
   useForm()이라는 hook을 사용해서 form을 관리할 수 있는 모든 메서드들을 선언하고 호출합니다. 간단하게 몇가지만 살펴보겠습니다.

2. handleSubmit()
   메소드는 인풋에 입력된 값이 제출되기 전에 입력된 값이 올바른 값인지를 확인하는 과정을 수행합니다.(validation)

3. useForm() 에서 제공하는 “register” 메서드를 이용해서 인풋 값을 등록해줍니다.
   register메서드의 핵심은 코드 상의 비제어 컴포넌트(별도의 value나 onChange 메소드 없이 register에서 값을 관리)를 Hook 과 연결하여 값이 검사될 수 있도록 만들고 폼을 제출할 때(handleSubmit) 한꺼번에 모아지도록 하는 것입니다. 각각의 필드는 등록 과정의 key 로 사용하기 위해 name 속성이 반드시 필요합니다.(이 때는 리스트의 Key와 같이 고유한 값을 string형태로 입력합니다.)

4. register 메서드의 인자로, 해당 인풋의 중요도 (required: true/false)를 설정할 수 있고, pattern을 등록하여 유효성 검사를 할 수 있습니다. (표준 HTML 유효성 검사를 지원합니다.)

5. error 처리 또한 React-hooks-form을 사용하면 간단하게 처리할 수 있습니다. register에서 등록된 인풋 값의 상태를 바라보며 잘못된 입력이 있을 경우 HTML element의 형태로 화면에 바로 렌더링 하는 것이 가능합니다.

사용 후기

프론트엔드 개발을 하며 다양한 form을 다루게 되는 경험을 하게 됩니다. 인풋 폼에 대한 상태관리가 생각보다 간단하지 않고, 지저분한 코드가 되기 쉽습니다. 그래서 form을 지원하는 다양한 라이브러리들을 알아보게 되었는데, 다른 라이브러리들에 비해 비교적 사용방법이 간단하고, 직관적으로 이해하기가 좋았습니다. 또한 다른 라이브러리에 대한 의존성도 없어서 진행중인 프로젝트에 초기부터 적용하여 사용이 가능했습니다. 리액트 개발 중에 form을 관리해야 할 때 React-hooks-form을 사용해보시는것을 추천해드립니다.

2021-04-27 18:00