useRef의 파라미터에서 타입

  const rootRef = useRef(null);
  const size = useResize(rootRef);

  return <div ref={rootRef}></div>

TypeScript 환경에서 useRef를 사용하고 있었다. 그리고 이 ref값을 함수나 훅스에 넘겨주는 과정에서 문제가 생겼다.

export const useResize = (ref: any) => {
  //...
}

파라미터의 타입을 알 수가 없었던 것이다. 에러를 확인해보면 MutableRefObject를 사용하라는데 나는 이걸로 해결이 안되었다.

Stack Overflow를 참고한 결과 이 경우에는 RefObject를 사용하면 된다고 한다.

  const rootRef = useRef<HTMLDivElement>(null);
  const size = useResize(rootRef);

  return <div ref={rootRef}></div>

먼저 useRef 자체에도 타입을 선언해준다.

export const useResize = (ref: RefObject<HTMLDivElement>) => {
  //...
}

그 후에 파라미터에서는 이와 같이 넣어주면 된다. 나는 현재 div에 ref값을 넣어주어 HTMLDivElement를 사용했지만, 다른 경우에는 다른 타입을 넣어주면 된다.