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

ref를 선언하고 넣어줬더니 ref에서 빨간줄이 떴다. 왜 또.... 😞

...

const slideRef = useRef();

...

<div className='slideContainer' ref={slideRef}>
    {imgUrl.map((el) => (
      <SlideImg url={el.url} key={el.id}>
        <h5 className='alt'>{el.title}</h5>
      </SlideImg>
    ))}
</div>

...

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

---

이유

useRef의 초기값으로 null을 주지 않아서이므로 초기값을 주면 된다! 제네릭에 타입을 안정해줘도 에러는 사라지지만 작업하다가 빨간 줄이 생길 수도 있으니 타입을 지정하는걸 추천한다.

...

const slideRef = useRef<HTMLDivElement>(null);
// 또는
//const slideRef = useRef(null);

...

<div className='slideContainer' ref={slideRef}>
    {imgUrl.map((el) => (
      <SlideImg url={el.url} key={el.id}>
        <h5 className='alt'>{el.title}</h5>
      </SlideImg>
    ))}
</div>

...

 

참고 1

참고 2