useRef 의 타입

조성찬·2024년 12월 13일
0

리액트 타입스크립트를 사용하면, 여러 hook들의 타입을 결정을 해줘야 할때가 많다.

예를 들어 useState같은 경우에는 관리하는 요소가 문자열이면 useState<string>("")이런식으로 타입을 정의해 주면 된다.

그래서 코린이는 오늘도 useRef의 타입으로 <string>을 넣었다. 당연하게도 에러가 뜬다...

useRef 훅 같은 경우에는 타입에 Element의 종류를 넣어 줘야 한다고 한다.

예:

const dateRef = useRef<HTMLInputElement>();
...
<input type="date" ref={dateRef} value={date} />

이런식으로 하면 되지만, 아직 끝난게 아니다. 이렇게 하면 아직도 에러가 떠있다.

그 이유는 useRef같은 경우에는 컴포넌트가 렌더링되기 전에 참조할 DOM요소가 없어서 초기값을 null로 설정을 해줘야 한다고 한다.

그래서 useRef 의 타입은:

const dateRef = useRef<HTMLInputElement | null>(null);

이런식으로 정의를 해줘야 한다고 한다.

0개의 댓글