💡Aha!

useRef 사용 시 'undefined' is not assignable to type 'HTMLInputElement | null' 문제 해결

2023.12.06

const inputRef = useRef<HTMLInputElement>();

useRef를 이용해 input 컴포넌트에 적용 할 ref를 만들어주고 적용했더니 다음 과 같은 오류가 발생한다.

TS2322: Type 'MutableRefObject<HTMLInputElement | undefined>' is not assignable to type 'LegacyRef<HTMLInputElement> | undefined'.
  Type 'MutableRefObject<HTMLInputElement | undefined>' is not assignable to type 'RefObject<HTMLInputElement>'.
    Types of property 'current' are incompatible.
      Type 'HTMLInputElement | undefined' is not assignable to type 'HTMLInputElement | null'.
        Type 'undefined' is not assignable to type 'HTMLInputElement | null'.

해결

const inputRef = useRef<HTMLInputElement>(null); // null 추가

비어있는 함수에 null을 주면 해결된다.