useRef의 파라미터에서 타입

HyunHo Lee·2022년 5월 4일
0

문제해결

목록 보기
7/19
post-thumbnail
  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를 사용했지만, 다른 경우에는 다른 타입을 넣어주면 된다.

profile
함께 일하고 싶은 개발자가 되기 위해 달려나가고 있습니다.

0개의 댓글