*Ref forwarding
은 일부 컴포넌트가 받은 ref를 가져와 자식 요소로 전달
하는 기능입니다.*
React 컴포넌트를 forwardRef()
로 감싸면, 컴포넌트 함수는 추가적으로 두 번째 매개변수로 ref
를 받을 수 있습니다.
// [ Child Component ]
const ButtonElement = React.forwardRef((props, ref) => (
<button ref={ref} className="CustomButton">
{props.children}
</button>
));
// [ Parent Component ]
// Create ref to the DOM button:
const ref = React.createRef();
<ButtonElement ref={ref}>{'Forward Ref'}</ButtonElement>;