React-Hook-Form에 대해 알아보고 적용해보기 4일차 (완료)

React-Hook-Form과 Controller 컴포넌트

• 리팩토링 과정을 거치면서 고민되었던 문제는 input을 스타일이 적용된 공통 컴포넌트를 사용한다는 것이였는데, react-hook-form을 사용하면서 register를 전달해주어야 하는데 이를 수정하기 위해서는 많은 고민이 필요해보였다.
• 이럴 때, 편리하게 사용할 수 있는 것이 react-hook-form에서 지원하는 controller 컴포넌트이다.

Controller 컴포넌트 사용 방법

return (
  ...
          <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col w-full gap-[16px]">
    ...
              <Controller
                name="email"
                control={control}
                render={({ field }) => <EditTextField label="이메일" {...field} />}
              />
    ...
          </form>
  ...
  );

• form 태그 내부에 Controller 컴포넌트를 사용하고 name, control, render 속성을 지정해 주면 된다.
• name에는 useForm에 생성한 구분값을 넣어준다.
• control에는 useForm에서 호출한 control을 넣어준다.
• render에는 호출할 컴포넌트를 함수로 넣어준다.

주의사항
render에 들어가는 컴포넌트에 ref를 전달해주어야 하기에 fowardRef로 감싸주어야 한다.

const EditTextField = forwardRef<HTMLInputElement, EditTextFieldProps>(
...
)

결과

• 공통 컴포넌트를 크게 수정하지 않고 react-hook-form을 적용가능 하였다.

React-Hook-Form을 적용해 본 후기

첫 번째로, 생각만큼 코드 양이 줄어들지는 않았다.

• 생각만큼은 아니였지만 input에 대한 커스텀 훅 파일을 삭제할 수 있었기에 이를 고려하면 코드가 간단해지기는 하였다.
  

두 번째로, 불필요한 리렌더링을 줄일 수 있었다.

• text input에 대해서 모든 글자에 리렌더링 발생을 막을 수 있었다.

마지막으로, 제어 컴포넌트도 유연하게 다룰 수 있는 방법을 찾아봐야겠다.

• 비록 react-hook-form을 사용하면서 text input에 대해서는 긍정적인 리팩토링이 이루어졌지만 이미지라던가 활동상태 같은 제어 컴포넌트를 다루는 부분은 기존의 코드를 사용해야만 하였다.
• react-hook-form을 아직 많이 다루어 본 경험이 없어서 이를 못 다룬 것인지 더 공부해 볼 필요성을 느끼게 되었다.