UseRef with TypeScript

생성일

Dec 1, 2021 09:27 AM

태그

TypeScript

작성자

해결 완료

문제

useRef에 대한 타입을 구체적으로 지정해야 했다.

현재 imgElement는 이벤트 핸들러 메서드를 호출하기 위해 image 엘리먼트를 가리키는 용도의 ref이다.

이를 해결하려면 어떻게 해야 할까?

핵심은 useRef의 타입이 Element라는 것을 명시해주는 것이었다.

그 이유는, addEventListener에서의 입장에서는 imgElement가 타입이 Element 속성인지 모르기 때문이다.

따라서 다음과 같이 처리하였다.


const imgRef = useRef<HTMLImageElement>(null);

타입 오류가 해결되었다.