React-Hook-Form에 대해 알아보고 적용해보기 3일차

자식 컴포넌트에 register 전달하기

• 이미지를 수정하는 버튼을 새로운 컴포넌트로 만들어서 분리하였는데, 자식 컴포넌트에 props로 전달한 register가 제대로 동작하지 않는다는 문제가 발생하였다.
• gif 속 console.log의 image 값이 null로 계속해서 나왔다.

코드

const ProfileEditPage = () => {
  const { register, handleSubmit, watch, formState } = useForm({
    mode: 'onChange',
    defaultValues: {
      name: workspaceUser?.name,
      image: null,
      email: workspaceUser?.email,
      phone: workspaceUser?.phone
    }
  });

  return (
    <div>
      ...
          <ProfileImgButton imageURL={imageURL} register={register} />
      ...
    </div>
  );
};

export default ProfileEditPage;

해결방법

• react-hook-form은 전달과정에서 ref를 사용하기 때문에 자식 컴포넌트를 fowardRef를 사용하여 생성해주어야 한다.

const ProfileImgButton = forwardRef(({ imageURL, register }, ref) => {
  return (
    ...
     <input id="profile" type="file" accept="image/*" {...register('image')} className="hidden" />
  );
});

export default ProfileImgButton;

• 그러나 위와 같이 작성하다보면 fowardRef에서 다음과 같은 타입에러를 만날 것이다.

Property 'imageURL' does not exist on type '{}'

• fowardRef에 대해 타입을 지정해 줄 필요가 있기 때문에 발생하는데 다음과 같이 작성해주면 해결할 수 있다.

const ProfileImgButton = forwardRef<HTMLInputElement, ProfileImgButtonProps>(({ imageURL, register }, ref) => {
  ...
}