[Ref forwarding] React.forward()

Ref forwarding은 재사용 컴포넌트(reusable component)를 사용하면서 ref를 props로 전달하고 싶을 때 사용한다.
(=== HTML엘리먼트가 아닌 React컴포넌트에서 ref prop을 사용하려면 React에서 제공하는 forwardRef() 함수를 이용해야 한다)

아래처럼 FancyButton이라는 재사용 컴포넌트가 있다고 할 때

function FancyButton(props) {
  return (
    <button className="FancyButton">
      {props.children}
    </button>
  );
}

React.forwardRef로 함수를 감싸고, 두 번째 인자에 ref로 받는다.

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;