React.forwardRef

ref, key와 같은 특별한 키워드는 props으로 상속할 수 없다
하지만 ref를 상속해야하는 경우가 생긴다면 어떻게 해야할까?
프로젝트에 React.forwardRef가 있어 이를 찾아봤다

1. React.forwardRef

ref를 전달 받아 하위 컴포넌트에 전달할 수 있게 해준다

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

// 이제 DOM 버튼으로 ref를 작접 받을 수 있습니다.
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

위 코드를 보면 React.forwardRef의 2번째 arg로 상위 컴포넌트에서 ref를 전달받은 것을 알 수 있다

전달받은 ref가 button과 연결되었기 때문에 상위 컴포넌트에서의 ref변수는 이제 <button>을 가리키게 된다

console.log(ref.current) // <button> DOM node

2. TL; DR

부득이하게 ref를 하위 컴포넌트에 전달하고 싶을 때 사용하는 것이 React.forwardRef이다

기본적인 사용법은 다음과 같다

const SomeComponent = React.forwardRef((props, ref) => (
    {/* return jsx */}
  )); 

React.forwardRef의 2nd arg로 ref를 받으며,
1st arg로는 일반적인 props를 받는다

*References

• React documentation : React.forwardRef
• React documentation : Forwarding Refs