💻 Ref 전달하기(feat. 리액트 공식문서)

⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다.

ref 전달은 컴포넌트를 통해 자식 중 하나에 ref를 자동으로 전달하는 기법이다. 일반적으로 애플리케이션 대부분의 컴포넌트에 필요하지는 않다. 그렇지만, 재사용 가능한 컴포넌트 라이브러리와 같은 어떤 컴포넌트에서는 유용할 수 있다.

DOM에 refs 전달하기

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

FancyButton 를 사용하는 다른 컴포넌트들은 일반적으로 내부 button DOM 요소에 대한 ref를 얻을 필요가 없다. 이는 컴포넌트들이 서로의 DOM 구조에 지나치게 의존하지 않기 때문에 괜찮다.

이런 캡슐화는 FeedStory나 Comment 같은 애플리케이션 레벨의 컴포넌트에서는 바람직하지만, FancyButton이나 MyTextInput과 같은 재사용성이 높은 말단 요소(Leaf요소)에서는 불편할 수도 있다. 이런 컴포넌트들은 일반적인 DOM, button, input과 유사한 방법으로 애플리케이션 전체에 걸쳐 사용되는 경향이 있다.

React 기술 용어 모음 - React

여기서 FeedStory나 Comment 는 복잡한 UI(App, FeedStory, Comment)를 말한다.

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

const FancyButton = React.forwardRef((props, ref) => (
// 3. React는 이 ref를 forwardRef 내부의 (props, ref) => ... 함수의 두 번째 인자로 전달합니다.
// 4. 이 ref를 JSX 속성으로 지정해서 <button ref={ref}>으로 전달합니다.
// 5. ref가 첨부되면 ref.current는 <button> DOM 노드를 가리키게 됩니다.
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>));

// 이제 DOM 버튼으로 ref를 작접 받을 수 있습니다.
const ref = React.createRef(); 
// 1. React.createRef를 호출해서 React ref를 생성하고 ref 변수에 할당한다.
<FancyButton ref={ref}>Click me!</FancyButton>;
// 2. ref를 JSX 속성으로 지정해서 <FancyButton ref={ref}>로 전달합니다.

위에서 FancyButton은 React.forwardRef를 사용하여 전달된 ref를 얻고 그것을 렌더링되는 DOM 버튼으로 전달한다. 이렇게 FancyButton을 사용하는 컴포넌트들은 button DOM 노드에 대한 참조를 가져올 수 있다.

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

컴포넌트 라이브러리에서 forwardRef를 사용하기 시작할 때 이것을 변경사항으로 간주하고 라이브러리의 새로운 중요 버전을 릴리즈 해야 한다. 이는 라이브러리에 주목할 만하게 다른 동작을 할 가능성이 높고 이전 동작에 의존하는 앱이나 다른 라이브러리들이 손상될 가능성이 크기 때문이다.

고차 컴포넌트(HOC, Higher Order Component)에서의 ref 전달하기

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;

logPropsHOC는 모든 props를 래핑하는 컴포넌트로 전달하므로 렌더링 된 결과가 동일하게 된다.

예를 들어, 이 HOC를 사용해서 FancyButton 컴포넌트로 전달하는 모든 props를 기록 할 수 있다.

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

  // ...
}

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

ref는 prop이 아니기 때문에 refs는 전달되지 않는다. key와 마찬가지로 ref는 React에서 다르게 처리한다. HOC에 ref를 추가하면 ref는 래핑 된 컴포넌트가 아니라 가장 바깥쪽 컨테이너 컴포넌트를 참조한다.

즉, FancyButton 컴포넌트를 위한 refs가 실제로는 LogProps 컴포넌트에 첨부된다는 것을 의미한다.

import FancyButton from './FancyButton';

const ref = React.createRef();

// 가져온 FancyButton 컴포넌트는 LogProps HOC이다..
// 렌더링된 결과가 동일하다고 하더라도, ref는 내부 FancyButton 컴포넌트 대신 LogProps를 가리킨다.
// 이것은 우리가 예를 들어 ref.current.focus()를 호출할 수 없다는 것을 한다..

<FancyButton
  label="Click Me"
  handleClick={handleClick}
  ref={ref}
/>;

React.forwardRef API를 사용하여 내부 FancyButton 컴포넌트에 대한 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} />;
  });
}

DevTools에 사용자 정의 이름 표시하기

React DevTools는 이 함수를 사용하여 ref 전달 컴포넌트에 대해서 무엇을 표시할 것인지 정의한다. 렌더링 함수를 지정하면 DevTools에 해당 이름도 포함된다.

const WrappedComponent = React.forwardRef(
  function myFunction(props, ref) {
    return <LogProps {...props} forwardedRef={ref} />;
  }
);

🔥 느낀점

React.forwardRef를 사용해서 ref를 얻을 수 있고 HOC와 이 부분을 잘 활용하면 컴포넌트 단위로 UI를 구성할 때 더 편리하게 구현할 수 있을 것 같다.

Refer

• Ref 전달하기