221221 항해99 45일차 forwardRef

• 내가 만든 컴포넌트(함수형 컴포넌트)의 ref를 이용하고 싶을 때가 있을 것이다.
• 아래와 같이 ref를 사용하지 못하는 이유는 함수형 컴포넌트는 인스턴스가 없어서이다.

const App = () => {
  const testRef = useRef()
  return (
    <>
      {...}
      <MyComponent ref={testRef} />
	  {...}
    </>
  )
}

const MyComponent = () => {
  return <div />
}

• 함수형 컴포넌트를 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>;

참조:
forwardRef는 무엇일까? 언제 사용 할까?