React Hook Form 종속성 제거

[GBAJS754]

문제상황

React Hook Form의 useFormContext와 FormProvider를 사용하여 Input과 Textarea 컴포넌트를 구현할 경우, 해당 컴포넌트들은 라이브러리에 강하게 의존하게 됩니다.
이는 React Hook Form 변경사항에 유연하게 대처하지 못하는 상황이 발생하거나, 다른 라이브러리로 전환하려는 경우 유지보수 및 변경이 어려울 수 있습니다.
현재 프로젝트에는 당장 필요한 작업은 아니었지만, 팀 회의 결과 "확장성을 최대한 고려하는 쪽으로 구현해보자"였기때문에 React Hook Form 의존성을 최소화하는 방향으로 구현해보았습니다.

해결방법

useFormContext와 FormProvider를 제거하고 props로 필요한 속성값을 전달받습니다. 특히, register 과정에서 ref가 활용되기 때문에 해당 컴포넌트는 forwardRef로 생성해야 합니다.

변경 전

const CommonTextarea = ({
  placeholder,
  name,
  label,
  registerOptions,
  size,
}: CommonTextareaProps) => {
  const {
    register,
    formState: { errors },
  } = useFormContext();

  return (
    <FormControl isInvalid={!!errors[name]} >
      <FormLabel>{label}</FormLabel>
      <Textarea
        id={name}
        size="sm"
        placeholder={placeholder}
        {...TEXTAREA_SIZE[size]}
        {...register(name, registerOptions)}
      />
      {errors[name] && <FormErrorMessage>{errors[name]?.message as string}</FormErrorMessage>}
    </FormControl>
  );
};

변경 후

const CommonTextarea = forwardRef(
  ({ placeholder, label, size, error, ...props }: CommonTextareaProps, ref) => {
    return (
      <FormControl isInvalid={Boolean(error?.message)}>
        <FormLabel>{label}</FormLabel>
        <Textarea
          size="sm"
          placeholder={placeholder}
          ref={ref}
          {...TEXTAREA_SIZE[size]}
          {...props}
        />
        {error?.message && <FormErrorMessage>{error.message}</FormErrorMessage>}
      </FormControl>
    );
  }
);

성과

React Hook Form의 의존성을 최소화하고, 더 큰 확장성을 고려하는 방향으로 구현했습니다.
향후 변경사항에 유연하게 대처할수있는 구조를 설계하였습니다.