useForm에서 FormProvider로 전환하기

[gorjs3540]

오늘은 React Hook Form의 FormProvider와 useFormContext를 사용해봤다.
그동안 control을 분리된 component에 넘겨줄 때 useForm 훅을 각 컴포넌트에서 직접 받아서 control을 props로 넘겨주는 방식으로 폼을 구성했었다.
이 방식은 간단한 폼에서는 괜찮지만, 컴포넌트가 많아지면 props drilling이 심해진다. 게다가 중첩된 구조나 섹션별 컴포넌트로 나누는 경우 관리가 번거로워졌다.

오늘 새로 알게 된 점은 FormProvider를 사용하면 이 문제를 해결할 수 있다는 것.
useForm()에서 반환된 모든 메서드를 FormProvider에 전달하면, 하위 트리 어디서든 useFormContext()로 접근할 수 있다.

작은 폼엔 useForm만 써도 되지만,
컴포넌트를 분리하거나 폼이 커질 땐 FormProvider + useFormContext 조합이 훨씬 깔끔하다.
불필요한 props 전달이 사라져 구조가 단순해지고 유지보수성이 높아진다.

Before

const { control } = useForm();

<form>
  <Input control={control} />
  <Select control={control} />
  <TextArea control={control} />
</form>

// 분리된 component
function Input(control: Control) {
  return <Control control={control} />
}

After

const methods = useForm();

<FormProvider {...methods}>
  <form>
    <Input />
    <Select />
    <TextArea />
  </form>
</FormProvider>

// 분리된 component
function Input() {
  const { control } = useFormContext();

  return <Control control={control} />
}

[al-bur]

RHF 너무 편리한 라이브러리..