[React] forwardRef

기본적으로 컴포넌트의 ref는 DOM 요소에만 직접 전달할 수 있다.

그런데 Functional Component는 ref를 사용할 수 없기 때문에 이 때 forwardRef를 사용하여 부모 컴포넌트에서 자식 컴포넌트의 DOM 요소를 참조할 수 있다.

 

예시 코드

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}

const FunctionalInputComponent = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {
	return <input {...props} ref={ref} />
})

export default function ParentComponent() {
	const ref = React.useRef<HTMLInputElement | null>(null);
    
    const handleInputFocus = () => {
    	ref.current?.focus();
    };
    
    return (
    	<div>
        	<Input ref={ref} />
            <button onClick={handleInputFocus}>Focus</button>
        </div>
    )
}