Forwarding Refs (Ref 전달하기)

https://ko.reactjs.org/docs/forwarding-refs.html를 읽고 정리한 글입니다

 

• 컴포넌트를 통해 자식 중 하나에 ref를 자동으로 전달하는 기법 ⇒ 재사용 가능한 컴포넌트 라이브러리 등에 효율적
• forwardRef를 사용할 때 ⇒ 변경사항으로 간주 & 라이브러리의 새로운 중요 버전 릴리즈
• 고차원 컴포넌트(HOC, Higher Order Component)에 유리할 수 있다
  • React.forwardRef API를 사용하여 refs 명시적으로 전달 가능

function logProps(Component) {
  class LogProps extends React.Component {
    componentDidUpdate(prevProps) {
      console.log('old props:', prevProps);
      console.log('new props:', this.props);
    }

    render() {
      const {forwardedRef, ...rest} = this.props;

      // 사용자 정의 prop "forwardedRef"를 ref로 할당합니다.
      return <Component ref={forwardedRef} {...rest} />;
    }
  }

  // React.forwardRef에서 제공하는 두 번째 파라미터 "ref"에 주의해주세요.
  // 가령 "forwardedRef"같은 일반 prop으로 LogProps에 전달할 수 있습니다.
  // 그 다음 Component에 연결할 수 있습니다.
  return React.forwardRef((props, ref) => {
    return <LogProps {...props} forwardedRef={ref} />;
  });
}

• React.forwardRef : 렌더링 함수를 받는다 (displayName 속성 지정 가능)