‘React’에서 ‘LegacyRef’와 ‘useRef’를 사용하여 ‘MutableRefObject’ 오류 문제 해결하기

제목: React에서 ‘MutableRefObject’ 타입 오류를 해결하는 방법

소개

React를 사용하다가 “Type ‘MutableRefObject’ is not assignable to type ‘LegacyRef’ or ‘RefObject'”라는 오류 메시지를 만나셨다면, 이 곳이 올바른 곳입니다. 이 오류는 귀찮을 수 있지만 걱정하지 마세요 – 이 글에서는 이 문제를 설명하고 단계별로 해결 방법을 제공할 것입니다.

오류 설명

보이는 오류 메시지는 useRef 훅과 관련된 타입 불일치를 가리킵니다. 이는 훅이 HTML 요소나 null을 기대하지만 undefined를 전달하고 있어서 발생하는 오류입니다.

해결 방법

이 오류를 해결하기 위해 코드에서 다음 변경사항을 적용하세요:

1단계: 초기 값으로 null 전달

useRef 훅을 사용할 때, 초기 값으로 null을 전달하세요. 이렇게 하면 React에게 ref가 HTML 요소의 참조 또는 null일 수 있다는 것을 알릴 수 있습니다.

const handleRef = React.useRef<HTMLInputElement | null>(null);

2단계: Ref 타입 업데이트

ref의 타입을 새로운 초기화에 맞게 업데이트해야 합니다. LegacyRef 대신 RefObject로 타입을 변경하세요.

const handleRef = React.useRef<HTMLInputElement | null>(null);

3단계: 현재 값을 올바르게 처리

코드에서 ref의 현재 값을 올바르게 처리하는지 확인하세요. HTML 요소의 속성이나 메소드에 접근하기 전에 현재 값이 정의되어 있는지 확인하세요.

if (handleRef.current) {
  handleRef.current.checked = checked;
}

변경된 코드

필요한 변경사항이 반영된 업데이트된 코드입니다:

const InputElement = React.forwardRef((props: any, ref) => {
  const handleRef = React.useRef<HTMLInputElement | null>(null);
  
  React.useImperativeHandle(ref, () => ({
    setChecked(checked: boolean) {
      if (handleRef.current) {
        handleRef.current.checked = checked;
      }
    }
  }), []);
  
  return (
    <input ref={handleRef} type="checkbox" />
  );
});

결론

이 단계를 따라가면, React에서 발생하는 “‘MutableRefObject’ 타입이 ‘LegacyRef’ 또는 ‘RefObject’ 타입에 할당할 수 없습니다” 오류를 해결할 수 있어야 합니다. 초기 값으로 null을 전달하고, ref 타입을 업데이트하고, 코드에서 현재 값을 올바르게 처리하는지 확인하세요. 이러한 조정을 통해 코드는 예상대로 작동하며 어떠한 타입 오류도 발생하지 않을 것입니다.

이 글이 도움이 되었으면 좋겠습니다. 추가 질문이 있으시면 아래에 댓글을 남겨주세요!

참고 자료 : 

reactjs