React Hook Form의 서로 비슷한 기능들을 비교해 보자

이번 포스팅에서는 React Hook Form을 사용하면서 느꼈던 비슷한 기능을 하는 API들을 비교하고 사용하며 느낀 점들을 정리해 보았습니다.

 

 

 

 

1️⃣ Controller vs. useController

AntD, MUI와 같은 UI 라이브러리나 커스텀 컴포넌트를 사용할 때 Controller나 useController를 사용하여 React Hook Form의 기능을 쉽게 적용할 수 있습니다.

 

 

Controller

function Component() {
    const { control } = useForm<{type: string}>();
    
    return (
      <Controller
          control={control}
          name='type'
          render={({field : {onChange, value}}) => (
          <input
            type='input'
            value={value}
            onChange={onChange}
      	  />
         )}
      />
    )
}

 

Controller를 사용하면서 느꼈던 점은, Controller의 render 속성의 return 문에서 사용하는 컴포넌트의 속성이 많아질수록, 또는 한 컴포넌트에 사용되는 Controller가 많아질수록 코드 라인과 들여쓰기 횟수가 증가해 가독성이 떨어진다는 것입니다. 

Controller와 동일한 기능을 하는 useController 훅을 사용할 수 있습니다.

 

useController

function Component() {
    const { control } = useForm<{type: string}>()
    const { field } = useController({ name: 'type', control })
    
    return (
        <input
          type='input'
          value={field.value}
          onChange={field.onChange}
        />
    )
}

 

 

2️⃣ setValue vs. reset

React Hook Form - useForm: reset에 따르면 reset은 대량의 데이터 변경을 할 때 용이하고, setValue는 소량의 데이터를 변경할 때 용이합니다.
저는 모든 폼을 변경하는 경우는 reset을, 특정 필드만 변경하는 메소드를 작성할 때는 setValue를 사용했습니다.

import { useForm } from 'react-hook-form';  

export function Component() {  
  const { setValue, reset } =  
    useForm();  
    
  // 생략  

  useEffect(() => {  
    if (data) {  
      const {  
        title,  
        groupId,  
        address,  
        latitude,  
        longitude,  
        contents,  
        maxHumanCount,  
        date,  
        status,  
      } = data;  

      reset({  
          title,  
          groupId,  
          address,  
          latitude,  
          longitude,  
          contents,  
          date,  
          maxHumanCount,  
          status,  
        });  
    }  
  }, [data, reset]);  
  
  const setGroup = (groupId: string) => {  
      setValue('groupId', groupId);  
  }  
  // 생략...  
}

 

 

3️⃣ rules vs. schema

Controller나 useController를 사용할 때, rules 속성을 지정하여 필드의 규칙을 지정할 수 있습니다.

 

 

rules

import { useController, useForm } from "react-hook-form";

export default function App() {
  const { control } = useForm({ mode: "all" });
  const {
    field,
    fieldState: { error },
  } = useController({
    name: "text",
    control,
    rules: { required: "Text is required" },
  });

  return (
    <>
      <input onChange={field.onChange} value={field.value} />
      {error && <p>{error?.message}</p>}
    </>
  );
}

 

schema

schema를 직접 작성해서 사용할 때는 yup, zod, joi와 같은 schema validation 라이브러리를 함께 사용할 수 있습니다.

import { useController, useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

export default function App() {
  const schema = yup.object().shape({
    text: yup.string().required("Text is required"),
  });

  const { control } = useForm({ mode: "all", resolver: yupResolver(schema) });
  const {
    field,
    fieldState: { error },
  } = useController({
    name: "text",
    control,
  });

  return (
    <>
      <input onChange={field.onChange} value={field.value} />
      {error && <p>{error?.message}</p>}
    </>
  );
}

 

다음과 같이 yup의 test 메소드로 커스텀 에러 타입와 에러 메시지를 만들어 사용할 수도 있습니다. 주로 API 요청을 통해 닉네임 중복 확인과 같은 절차를 거치고 싶을 때 schema validation을 사용했습니다.

import { useController, useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

export default function App() {
  const duplicated = ["a", "b", "c", "aa", "aaa", "bb", "bbb", "cc", "ccc"];
  const schema = yup.object().shape({
    text: yup
      .string()
      .required("Text is required")
      .test(
        "Unique",
        "Values need te be unique",
        (values) => !duplicated.includes(values)
      ),
  });

  const { control } = useForm({ mode: "all", resolver: yupResolver(schema) });
  const {
    field,
    fieldState: { error },
  } = useController({
    name: "text",
    control,
  });

  return (
    <>
      <input onChange={field.onChange} value={field.value} />
      {error && <p>{error?.message}</p>}
    </>
  );
}