TS에서 ForwardedRef 사용하기

간혹 컴포넌트에서 사용하는 ref를 외부에 노출시켜야 하는 경우가 있다.

이런 경우 다음과 같이 사용할 수 있다.

interface ITestComponentProps {
    name: string;
}
const TestComponent = forwardRef(function TestComponent(props: ITestComponentProps, ref: ForwardedRef<HTMLDivElement>) {

  return (
    <div ref={ref}>{props.name}</div>
  )
})

export default TestComponent

하지만 ref를 제공하는 컴포넌트에서 해당 ref를 사용한 로직을 작성하려고 할 때 타입에러가 발생할 수 있다.

interface ITestComponentProps {
    name: string;
}
const TestComponent = forwardRef(function TestComponent(props: ITestComponentProps, ref: ForwardedRef<HTMLDivElement>) {

    useEffect(() => {
				/*
				다음과 같은 타입 에러가 발생한다.
				'ForwardedRef<HTMLDivElement>' 형식에 'current' 속성이 없습니다.
			  '(instance: HTMLDivElement) => void' 형식에 'current' 속성이 없습니다.ts(2339)
				*/
        ref.current.clientWidth
    })

  return (
    <div ref={ref}>{props.name}</div>
  )
})

export default TestComponent

// react type 중
type ForwardedRef<T> = ((instance: T | null) => void) | MutableRefObject<T | null> | null;

따라서 컴포넌트에서 ref를 사용해야 하고 외부에 노출시켜야 한다면 다음과 같이 사용할 수 있다.