react-hook-form 커스텀 버튼 파일 업로드

예시로 파일 업로드를 하는 인풋에 새로운 커스텀 버튼을 달아 작동하게 하고 싶은 상황

input에 useRef를 통해 래퍼런스를 추가해준 상태에서 커스텀 버튼의 클릭 이벤트로 클릭을 발생시키는 상황을 만들면
기존 react-hook-form의 register.ref 위에 덮어씌워져 훅폼의 데이터에 추가가 되지 않는 상황이 생김.

즉, 추가 커스텀 버튼을 누르면 input file 선택 버튼이 클릭 되어야하고 그와 동시에 input file에 추가된 파일데이터가 훅폼에 추가가 되어야하기때문에 인풋의 ref에 커스텀 버튼 클릭을 위한 ref와 훅폼의 ref가 동시에 걸려야 함.

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

export default function App() {
  const { register, handleSubmit } = useForm();
  const fileInputRef = React.useRef(null); // 파일 입력 엘리먼트의 ref

  const onSubmit = (data) => {
    console.log(data)
  };

  const handleCustomButtonClick = () => {
    fileInputRef.current.click();
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 파일 입력 엘리먼트를 숨깁니다 */}
      <input
        type="file"
        {...register('file')}
        ref={el => {
          fileInputRef.current = el
          register('file').ref(el)
        }}
        style={{display: 'none'}}
      />

      <button type="button" onClick={handleCustomButtonClick}>
        커스텀 버튼
      </button>
      <input type="submit" value="제출" />
    </form>
  );
}

그냥 둘 다 할당 해주면 됨..
이와 비슷하게 체인지 이벤트나 블러도 처리가 가능