ref 를 사용하다보면 종종 이런 에러를 마주친다.

MutableRefObject' is not assignable to type '((instance: HTMLAnchorElement | null) => void) | RefObject | null | undefined'.

같은 ref인데 왜 타입에러가 발생하는 것인가, MutableRefObject와 RefObject의 차이점을 정리해본다.

RefObject

초기값을 제네릭타입에 상관없이 null로 선언했을 경우 추론되는 타입

const numberRef = useRef<number>(null);

MutableRefObject

초기값을 제네릭타입에 맞춰서 정의하거나 undefined로 냅뒀을 경우 추론되는 타입

const numberRef = useRef<number>(0);
const numberRef = useRef<number | null>(null);