여기에는 useRef를 사용하는 컴포넌트가 있습니다.

컴포넌트 내부에는 id라는 변경 가능한 ref 객체와 id.current 에 임의의 값을 할당하는 useEffect 가 있습니다.

export const Component = () => {
  const id = useRef();

  useEffect(() => {
    // error under id.current
    id.current = "Random value!";
  }, []);

  return <div></div>;
};

그러나 id.current를 undefined 타입에 할당할 수 없다는 오류가 발생합니다.

Challenge

여러분의 임무는 런타임 코드를 변경하지 않고 이 오류를 수정하는 솔루션을 찾는 것입니다.

Typing the useRef Hook

먼저 CMD + Click 을 사용하여 useRef 의 타입 정의를 확인해 보겠습니다.

실제로 세 가지 정의가 있지만 이 연습에서는 아무 것도 전달하지 않는 정의에 초점을 맞출 것입니다.

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

보시다시피, 기본값이 undefined 제네릭 타입 T 가 있고, 함수는 T 또는 undefined 의 MutableRefObject를 반환 합니다.

Back to Our Code

연습 코드로 돌아가서, useRef 에 아무것도 전달하지 않습니다.

const id = useRef();

useRef 위로 마우스를 가져가면 undefined 로 타입지정 됩니다.

// hovering over useRef()
(alias) useRef<undefined>(): React.MutableRefObject<undefined>