[TS] ref type 오류해결

TS 생성 시 다음 오류 발생

'forwardedref<unknown>' 형식은 'legacyref<htmlinputelement> | undefined' 형식에 할당할 수 없습니다.

 
'mutablerefobject<unknown>' 형식은 'legacyref<htmlinputelement> | undefined' 형식에 
할당할 수 없습니다.

 'mutablerefobject<unknown>' 형식은 'refobject<htmlinputelement>' 
형식에 할당할 수 없습니다.

 'current' 속성의 형식이 호환되지 않습니다.

 
'unknown' 형식은 'htmlinputelement | null' 형식에 할당할 수 없습니다.

forwardRef로 생성한 함수에서 다음과 같이 ref 타입을 지정했다.

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로 전달할 때

문제 상황 > 화살표 기능 일반 기능

velog.io

https://zerodice0.244

(응답) MutableRefObject 및 LegacyRef

입력의 onChange에 setState를 할당하여 값이 변경될 때마다 상태 값이 변경되도록 설정하고 입력에 넣은 값이 변경될 때마다 렌더링을 계속합니다.

정상인줄알았어

zerodice0.tistory.com

https://jforj.281

(응답) 응답 후크 양식에서 레지스트리 등록 방법 사용자 지정

안녕하세요. J4J입니다.

이번 포스트에서는 커스텀 리액트 훅 폼 레지스터를 등록하는 방법에 대해 작성해보는 시간을 갖도록 하겠습니다.

레지스터를 소품으로 전달 첫 번째 방법은 레지스터를 소품으로 전달하는 것입니다.

jforj.tistory.com