이 예제에서는 HTMLDivElement를 입력한 상태에서 useRef를 사용하려고 하는 동안 오류가 발생했습니다.

ref를 div에 직접 전달하려고 합니다.

export const Component = () => {
  const ref = useRef<HTMLDivElement>();

  // error over `ref`
  return <div ref={ref} />;
};

하지만 다소 불친절한 오류가 발생했습니다.

Type 'MutableRefObject<HTMLDivElement | undefined>' is not assignable to type 'LegacyRef<HTMLDivElement> | undefined'...

Challenge

여러분의 과제는 여기서 무슨 일이 일어나고 있는지, 왜 이러한 오류가 발생하는지, 그리고 이를 해결하기 위해 무엇을 할 수 있는지 파악하는 것입니다.

코드를 런타임에 약간 변경해야 합니다. 처음에는 직관적이지 않을 수 있지만 오류를 해결하는 데 필수적입니다.

Specify the Initial Value with useRef

이전과 마찬가지로 CMD + 클릭 을 하여 타입 정의를 확인하는 것으로 시작하겠습니다.

인자 없이 useRef 를 호출하면 타입이 T이거나 undefined 인 MutableRefObject가 리턴됩니다.

function useRef<T = undefined>(): MutableRefObject<T | undefined>;

즉, undefined가 union의 일부가 될 것입니다.

다시 코드로 돌아가서 ref.current를 작성한 다음 마우스 커서를 카져가면 HTMLDivElement 또는 undefined 요소가 됩니다.

export const Component = () => {
  const ref = useRef<HTMLDivElement>();

  // hovering shows `HTMLDivElement | undefined`
  ref.current

  return <div ref={ref} />;
};

ref prop은 null 일수는 있지만 undefined는 될 수 없다는 점을 기억하세요.