[STUDY] Ref 전달하기

Ref forwarding

Ref forwarding ( ref 전달하기 ) 은 한 컴포넌트의 ref 를 자식에게 전달 할 수 있는 기술이다.

 

애플리케이션 개발에 있어 필수적인 요소는 아니지만 컴포넌트 라이브러리를 재사용 할 시 사용하기 좋은 기술이다.

 

* Ref 란 render 메소드에서 생성된 DOM 노드나 React 엘리먼트에 직접 접근하는 방법이다.

Ref는 주로 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때. 애니메이션을 직접적으로 실행시킬 때. 서드 파티 DOM 라이브러리를 React와 같이 사용할 때 사용된다. (DOM에 직접적인 접근을 해야 할 때 주로 사용함) 

 

Ref 는 주로 이럴때 사용된다.

1. input/textarea 등에 포커스 처리를 해야 할 때
2. 특정 DOM의 크기를 가져와야 할 때
3. 특정 DOM에서 스크롤 위치를 가져오거나 설정을 해야 할 때
4. 외부 라이브러리 (플레이어, 차트, 캐로셀 ) 등을 사용 할 때

DOM 컴포넌트에게 ref 전달하기

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

 

FancyButton 컴포넌트를 자식 컴포넌트로 가지고 있는 부모 컴포넌트에서는 '주로' FancyButton 컴포넌트를 부모로 가지고 있는 Button 엘리먼트에 대한 ref 정보를 필요로 하지 않습니다.

 

한 애플리케이션에서 위의 버튼을 기본 button 엘리먼트를 대체하여 사용한다면 위의 버튼의 DOM 노드에 접근해야하는 경우가 많이 생길 수 있습니다. ( focus 이벤트, animation 이벤트 등을 주기 위해서 )

 

React.forwardRef

위의 FancyButton에 React.forwardRef 를 사용해서 ref forwarding을 할 수 있습니다.

 

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

 

// FancyButton 을 호출하는 컴포넌트에서 
// FancyButton 내부에 있는 button DOM 노드를 불러 올 수 있음.

const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

 

Higher-order components의 ref 전달

* HOC ( higher-order components ) 리액트 컴포넌트를 인자로 받아 다른 리액트 컴포넌트를 반환하는 함수이다.

주로 파라미터로 컴포넌트를 받고 함수 내부에서 새 컴포넌트를 만듬 다음에 해당 컴포넌트 안에서 파라미터로 받아온 컴포넌트를 렌더링 한다. 주로 반복될 수 있는 코드들을 HOC로 만들어서 반복을 줄일 수 있다.

 

이러한 HOC에서 유용하게 쓰일 수 있다. 아래는 콘솔에 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를 전달하는데, 따라서 렌더링된 결과가 똑같아진다.
• 예를 들어, FancyButton 컴포넌트에 전달되는 모든 props들을 로그하기 위해서 이 HOC를 사용할 수 있다.