💡 Ref: render메소드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방식을 제공하는 객

DOM에 refs 전달하기

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

일반적인 컴포넌트는 DOM 요소에 직접 의존할 일이 없지만, 밑단의 재사용성 높은 요소들은 직접 의존해야 할 일이 생긴다. 이러한 문제를 해결하기 위해 ref를 쓴다.

Ref 전달하기는 일부 컴포넌트가 수신한 ref를 받아 조금 더 아래로 전달할 수 있는 기능이다.

아래의 예에서 FancyButton은 React.forwardRef를 사용하여 전달된 ref를 얻고, 그것을 렌더링 되는 DOM button으로 전달한다.

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>;

이런 방법은 DOM노드에 대한 직접적인 접근을 할 수 있다.

💡 알아두기 ref에 대한 접근은 React.forwardRef() 호출을 통해서만 접근이 가능하다. 일반 함수나 클래스 컴포넌트에서는 props로 ref를 사용하지 못한다. Ref전달은 DOM 컴포넌트에만 한정적이지 않고 일반적인 클래스 컴포넌트 인스턴스에도 전달할 수 있다.

컴포넌트 라이브러리 유지관리자를 위한 주의사항

보류

고차원 컴포넌트에서의 ref 전달하기

이 기술은 고차원 컴포넌트에서 유용할 수 있다. 콘솔에 컴포넌트 props를 로깅하는 HOC예시를 보자.

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

    render() {
      return <WrappedComponent {...this.props} />;
    }
  }

  return LogProps;
}

logProps HOC는 모든 props를 래핑하는 컴포넌트로 전달한다.

class FancyButton extends React.Component {
  focus() {
    // ...
  }

  // ...
}

// FancyButton을 내보내는 대신 LogProps를 내보냅니다.
// 그래도 FancyButton을 렌더링합니다.
export default logProps(FancyButton);

위 예제에서 문제는 ref는 props로 전달되지 않는 것이다. 이유는 ref는 props가 아니기 때문이다.

HOC에 ref를 추가하면 ref는 래핑된 컴포넌트가 아니라 가장 바깥쪽 컨테이너 컴포넌트를 참조한다.