[React] MutableRefObject와 LegacyRef

[React] MutableRefObject와 LegacyRef

출처: https://zerodice0.tistory.com/244

[React] MutableRefObject와 LegacyRef

 

우선 Input의 ref를 보면 요 녀석은 LegacyRef|undefined를 받게 되어있다. 요 녀석을 따라가보자.

 

 

ref 자체가 LegacyRef나 undefined만 할당할 수 있는 녀석이었다.

 

Input이 어째서 LegacyRef를 참조하는지는 IntrinsicElement를 살펴보면 알 수 있다. IntrinsicElement는 Dom elements에다, React 내에서 추가한 props를 처리할 수 있도록 만들어놓은 녀석인 듯(?)하다. 요 녀석부터 살펴보자.

---

useRef가 반환하는 녀석을 보면 MutableRefObject<HTMLInputElement | undefined>를 반환하는 걸 볼 수 있다. 뭐, T를 HTMLInputElement로 주고 초기값이 undefined니까 자연스럽게 T가 HTMLInputElement|undefined로 추론되는 것.

문제는 ref의 T가 IntrinsicElements의 DetailedHTMLProps에 의해서 HTMLInputElement로 고정됐는데, useRef의 반환형은 초기값이 undefined이므로 T가 HTMLInputElement | undefined로 고정된다. 결국 여기서 T가 다르기때문에, ref에 내려꽂으면 에러가 발생하는 것!

이제 useRef<HTMLInputElement>()를 useRef<HTMLInputElement>(null)로 변경하면 무슨 일이 일어나는지 살펴보자.

---

 

useRef의 반환형이 RefObject<HTMLInputElement>로 바뀌었다! 위에서 살펴봤던 세 가지 형태의 useRef에서, T값이 변경되어 반환형도 달라졌기 때문이다.

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

이제 할당하고자 하는 ref의 타입과 useRef의 반환형이 동일하므로, 에러가 발생하지 않게됐다. 와! 고민 해결!

반응형

 

출처: https://zerodice0.tistory.com/244 [검은곰의 아카이브:티스토리]