여기에는 문자열이 타입 인수로 전달되고 런타임 인수로 null이 전달되는 useRef hook이 있는 컴포넌트가 있습니다.

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

  // Why is this not allowed?
  ref.current = "Hello";

  return null;
};

그러나 참조의 현재 속성이 읽기 전용으로 표시되어 있으므로 current 속성에 값을 할당하는 데 문제가 있습니다.

Cannot assign to 'current' because it is a read-only property.

Challenge

여러분의 임무는 이 문제의 원인을 찾아낸 다음 코드 줄을 변경하여 ref를 변경 가능하게 만드는 것입니다.

Targeting a useRef Overload

타입 정의 내부에는 함수 오버로드처럼 작동하는 useRef 훅에 대한 여러 선언이 있습니다.

이들은 useRef를 호출할 수 있는 다양한 방법이며, 전달한 내용에 따라 다른 것을 반환합니다.

첫 번째 오버로드에서는 초기값을 전달하면 해당 값이 포함된 MutableRefObject를 반환합니다.

function useRef<T>(initialValue: T): MutableRefObject<T>;

다시 코드로 돌아가서 테스트 mutableRef를 생성해 보겠습니다.

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

  const mutableRef = useRef<string>("123456")

mutableRef에 마우스를 가져가면 React.MutableRefObject<string> 으로 타입지정 되어 있는 것을 볼 수 있습니다. VSCode에서 함수를 CMD + 클릭 하면 사용 중인 정확한 오버로드로 이동합니다.

이제 mutableRef가 어떤 오버로드를 사용하는지 알았으니, null을 전달한 useRef를 CMD + 클릭해 봅시다.

const ref = useRef<string>(null);

이 버전은 읽기 전용 RefObject를 반환하는 두 번째 오버로드에 해당합니다. 이것이 바로 오류가 발생하는 이유입니다!