[TS] ref type 오류해결 forwardedref<unknown>...(+never형식에 focus속성이 없다)

TS 작성 중 다음과 같은 오류 발생

'forwardedref<unknown>' 형식은 'legacyref<htmlinputelement> | undefined' 형식에 할당할 수 없습니다. 
'mutablerefobject<unknown>' 형식은 'legacyref<htmlinputelement> | undefined' 형식에 
할당할 수 없습니다. 'mutablerefobject<unknown>' 형식은 'refobject<htmlinputelement>' 
형식에 할당할 수 없습니다. 'current' 속성의 형식이 호환되지 않습니다. 
'unknown' 형식은 'htmlinputelement | null' 형식에 할당할 수 없습니다.

 

forwardRef 로 작성한 함수에서 ref type을 다음과 같이 지정해주었다.

ref?: React.ForwardedRef<HTMLInputElement> | undefined

 

이것도 해봤더니 되긴함)

ref?: React.LegacyRef<HTMLInputElement> | undefined

 

적용한 전체코드

import React, { forwardRef } from 'react';

interface InputProps {
  title: string;
 ..
  onChange: () => void;
}

export default forwardRef(function Input(
  {
    title,
    onChange,
   ...
  }: InputProps,
  ref?: React.ForwardedRef<HTMLInputElement> | undefined
) {
  return (
    <label>
      <p className={InputTitle}>{title}</p>
      <input
        type={type}
        ..
        ref={ref}
      />
    </label>
  );
});

 

 

https://velog.io/@rkio/Typescript-useRef%EB%A5%BC-%EB%8B%A4%EB%A5%B8-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%97%90-props%EB%A1%9C-%EC%A0%84%EB%8B%AC%ED%95%A0-%EB%95%8C-%ED%83%80%EC%9E%85-%EC%A0%95%EC%9D%98

[Typescript] useRef를 다른 컴포넌트에 props로 전달할 때

https://zerodice0.tistory.com/244

[React] MutableRefObject와 LegacyRef

https://jforj.tistory.com/281

[React] react-hook-form register 등록 방법 커스텀하기

 

---

* 값이 없을 경우 해당 input 에 focus가 가도록 설정했다. 

const titleUpdateInput = useRef();
...
	if (!UpdateData.title) {
    alert('제목을 입력해주세요.');
    titleUpdateInput.current.focus(); 
  }

 

여기서 TS를 적용하여 아래와 같이 ? 옵셔널체이닝을 이용하여 undefined일때의 오류도 해결했지만

never형식에 focus속성이 없다고 오류가 발생했다.

titleUpdateInput.current?.focus();

위 코드는 참고로 아래와 동일하다.

if (titleUpdateInput.current) {
  titleUpdateInput.current?.focus();
}

 

해결: useRef 에 type을 지정해주지 않아서 찾지 못해 생긴 에러였다. 아래 코드로 해결하였다.

const titleUpdateInput = useRef<HTMLInputElement>(null);

 

https://stackoverflow.com/questions/72805778/using-focus-on-useref-is-throwing-the-error-property-focus-does-not-exist-on