React에서 React-Hook-Form을 이용할 때 focus 하는 법. 리액트 JS, TypeScript

1. input을 생성여부를 결정하는 State를 이용해서, input요소를 생성함과 동시에 요소를 focus하는 동작을 만들려고 합니다.
2. react-hook-form을 이용하여 form을 만들어 주고. useRef() 훅을 이용하여 input을 지정한 다음, focus해주는 방식을 생각했습니다.
3. 이 방법으로 해본 결과, focus는 정상적으로 작동하지만, form이 제출되지 않는 현상

const [isAddBox, setIsAddBox] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);
  const handleAdd = () => {
    setIsAddBox(true);
  };
  const handleBlur = () => {
    setIsAddBox(false);
  };
  useEffect(() => {
    inputRef?.current?.focus();
  }, [isAddBox]);

  const { register, handleSubmit, watch, setFocus } = useForm();
  const onValid = (data: any) => {
    console.log(data.newContent);
  };
return (
...
	{isAddBox ? (
            <form onSubmit={handleSubmit(onValid)}>
              <input
                {...register("newContent", {
                  required: true,
                })}
                placeholder="Write..."
                ref={inputRef}
                onBlur={handleBlur}
              />
            </form>
          ) : null}
...
)

1. 폭풍 검색을 통해서 useForm에 자체적으로 setFocus 메서드가 있다는 것을 알게되고 수정한 코드

const [isAddBox, setIsAddBox] = useState(false);
  const { register, handleSubmit, watch, setFocus } = useForm();
  const handleAdd = () => {
    setIsAddBox(true);
    setFocus("newContent");
  };
  const handleBlur = () => {
    setIsAddBox(false);
  };
  const onValid = (data: any) => {
    console.log(data.newContent);
  };
  return (

    ...
         
          {isAddBox ? (
            <form onSubmit={handleSubmit(onValid)}>
              <input
                {...register("newContent", {
                  required: true,
                })}
                placeholder="Write..."
                onBlur={handleBlur}
              />
            </form>
          ) : null}

...

하지만 focus가 동작하진 않는다.

1. 그래서 약간 수정해본 결과, 비동기적으로 작성하였을 시 정상적으로 작동한다.
2. 아래와 같이 작동하면 VScode에서는 불필요한 await라고 나오지만… 너무나 필요한 아이러니한 상황..

const handleAdd = async () => {
    await setIsAddBox(true);
    setFocus("newContent");
  };

1. useRef()와 reat-hook-form을 같이 사용할 수 없는 이유는 아마도 useRef()는 DOM에서 객체에 직접 접근하는 훅인데, 이 때 react-hook-form자체 기능과 충돌하지 않나 라는 생각.