[React공식문서읽기] Ref전달

Ref 전달은 컴포넌트를 통하여 자식 중 하나에 ref를 자동으로 전달하는 기법이다.

일반적으로 application대부분은 컴포넌트에 필요하지 않지만, 재사용 가능한 컴포넌트 라이브러리와 같은 어떤 컴포넌트에는 유용할 수 있다. 

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

위와 같이 button을 Rendering하는 컴포넌트가 있다.

FancyButton을 사용하는 다른 컴포넌트들은 일반적으로 내부 button DOM요소에 대한 ref를 얻을 필요가 없다.

하지만 이런 캡슐화는 FeedStory나 Comment와 같은 Application level의 컴포넌트에서는 바람직하지만, 재사용성이 높은 말단 요소에서는 불편할 수 있다. 이러한 컴포넌트들은 일반적인 DOM button, input과 유사한 방법으로 Application전체에 걸쳐 사용될 수 있다. 또한 focus, select, animation등 관리하기 위해 이러한 DOM 노드에 접근하는 것이 불가피 할 수 있다.

Forwarding Refs

일부 컴포넌트가 수신한 ref를 받아서 더 아래로 전달할 수 있는 옵트인 기능이다.

FancyButton은 React.forwardRef를 사용하여 전달된 ref를 얻고, 그것을 Rendering되는 DOM button으로 전달한다.

아래와 같은 방식으로 ref를 전달할 수 있다.

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


function FancyButtonParents(){
   const ref = React.createRef();
   return(
      <FancyButton ref={ref}>버튼이라구!</FancyButton>;   
   );
}

1. React.createRef를 호출하여 React ref를 생성 후 ref 변수에 할당 

2. ref를 JSX속성으로 하여 Props로 전달.

3. React는 ref를 forwardRef내부의 (props, ref)에서 두번째 argument인 ref로 전달.

4. 받아온 ref를 element에 전달

5. ref가 첨부되면 ref.current는 <button> DOM노드를 가리키게 된다.

주의사항

컴포넌트 라이브러리에서 forwardRef를 사용하기 전 라이브러리의 새로운 중요 버전을 릴리즈 하여야 한다.

라이브러리에 ref가 할당되는 것이 무엇이고, 내보내는 유형은 무엇인가와 같은 다른 동작을 할 가능성이 높고, 이전 동작에 의존하는 Application이나 다른 라이브러리가 손상될 가능성이 크다.

조건적으로 React.forwardRef가 존재할 때 조건부로 적용하는 것도 같은 이유로 권장되지 않는다. 라이브러리가 동작하는 방식을 변경하고 React 그 자체를 업데이트 할 때 사용자 Application을 손상시킬 수도 있다.

 

참고 : ko.reactjs.org/docs/forwarding-refs.html

Forwarding Refs – React