간혹 컴포넌트에서 사용하는 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를 사용해야 하고 외부에 노출시켜야 한다면 다음과 같이 사용할 수 있다.
