react-hook-form 적용기(With. Typescript, Next.js, Mui library)

준이·2023년 6월 7일

mui next.js react hook form react-hook-form mui typescript

서론

새로운 회사 어드민 리뉴얼 프로젝트에 참여하게 되어서, 기술 스택을 정하는 와중 기존 다른 어드민 사이트를 처음 구축해본 경험을 토대로 기술을 추천하게 되었다. 그 중 하나가 새로운 기술이면서 최근 form 관련 라이브러리 중 가장 핫한 react-hook-form 라이브러리를 적용하게 되어서 글을 작성해보고자 한다.

도입 이유

도입을 생각하게 된 이유는 기존에 구축해본 어드민 페이지와 리뉴얼하게 될 어드민 페이지를(두 개는 다른 어드민 페이지임) 살펴보고 경험해본 결과 useState로 상태를 관리할 경우,

1. validation 코드가 생각보다 많아짐.
2. form의 갯수에 비례해 관리해야 할 상태가 많아짐.
3. 이로 인해 코드 복잡도가 증가하고 보일러 플레이트 코드가 증가함.

state가 몇 개일 땐 상관없지만, 갯수가 늘어날수록 위의 단점들이 눈에 띄게 도드라지기 때문에 위의 단점들을 당장 해결하기 위해 react-hook-form을 도입하는 게 좋다고 생각했다. 더욱이 새로운 어드민 페이지는 form을 통한 api 작업이 많았기 때문에라도 먼저 도입하는 게 좋다고 생각했다.

장점

이 외에도 react-hook-form에 대해서 알아본 장점으로는

비제어 컴포넌트

일반적으로 form은 제어 컴포넌트로 onChange 되서 값을 받아올 때마다 컴포넌트 전체가 렌더링이 일어나 불필요한 연산이 일어나게 된다.

react-hook-form은 비제어컴포넌트로 submit 행동으로 값을 받아오며, 입력폼이 늘어난다고 따로 state를 늘릴 필요도, 값이 변경되어도 리렌더링이 되지 않는다. 불필요한 리렌더링을 막는 것은 react에서 성능적으로 우수한 컴포넌트를 만들기 위해 꽤나 중요하다.

제어 컴포넌트 VS 비제어 컴포넌트

적은 용량

종속성이 없는 가벼운 용량의 라이브러리이다.
아래는 공식홈페이지에 나와있는 super-light 항목이다.

많은 사람들이 사용하는 라이브러리

꼭 많은 사람들이 사용한다고 좋은 라이브러리라고 할 순 없지만
현재까진 form 라이브러리 중에 가장 많은 사람들이 이용하고 있음을 확인할 수 있다. 많은 사람들이 사용하기 때문에 정보가 많고, 당연히 Typescript도 기본적으로 제공한다.

친절한 공식문서

공식문서의 친절함은 의외로 중요하다. 가독성 좋게 깔끔히 핵심만 정리되어 친절하게 안내하고 있다.

With MUI Library

필자의 회사의 프론트앤드는 mui library를 사용한다(데이터 그리드가 주요)
그렇기 때문에 Mui library의 form에 react-hook-form을 함께 사용해야 했는데
공식문서에 친절하게 mui와 같은 라이브러리와 함께 쓰는 방법이 기재되어 있다.

react-hook-form에서 제공하는 Controller 컴포넌트를 사용한다.
(정말 친절한 공식문서 체고^^)

import Select from "react-select";
import { useForm, Controller, SubmitHandler } from "react-hook-form";
import Input from "@material-ui/core/Input";

interface IFormInput {
  firstName: string;
  lastName: string;
  iceCreamType: { label: string; value: string };
}

const App = () => {
  const { control, handleSubmit } = useForm({
    defaultValues: {
      firstName: '',
      lastName: '',
      iceCreamType: {}
    }
  });

  const onSubmit: SubmitHandler<IFormInput> = data => {
    console.log(data)
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="firstName"
        control={control}
        render={({ field }) => <Input {...field} />}
      />
      <Controller
        name="iceCreamType"
        control={control}
        render={({ field }) => <Select 
          {...field} 
          options={[
            { value: "chocolate", label: "Chocolate" },
            { value: "strawberry", label: "Strawberry" },
            { value: "vanilla", label: "Vanilla" }
          ]} 
        />}
      />
      <input type="submit" />
    </form>
  );
};