팀원이 쓴 코드에 forwarding refs가 적용되어 있었다.
이해할 수 없는 코드였기에 공부를 하면 이곳에 정리(번역)하고자 한다.
이씨.. 글이 엄청 기네

공식 문서 링크

내용

요약

• 이건 자동으로 자기 자식 컴포넌트에 ref를 전달해주는 기술이다.
• 대부분의 경우에 이 기능은 필요 없을 것이다.
• 하지만 재사용이 가능한 컴포넌트 라이브러리를 만들 때에는 유용할 수 있다.
• 가장 보편적인 경우에 대해서는 아래에 기술하겠다.

refs를 DOM 컴포넌트로 넘겨주기

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

• 대부분의 경우에 리액트 컴포넌트들은 그 자세한 구현 내용을 숨겨둔다,.
• 위의 FancyButton을 사용하는 대부분의 컴포넌트들도 ref를 필요로 하는 경우는 없을 것이다.
• 그리고 그렇게 해야 DOM 구조 내부에서 서로에 의존하는 경우를 줄이기 때문에 좋을 것이다.
• 그러한 캡슐화가 어플리케이션 수준의 컴포넌트(즉, FeedStory나 Comment 처럼)에는 적합하지만 가장 아랫 단의 FancyButton이나 MyTextInput에서는 불편함을 야기할 수 있다.
• 이러한 컴포넌트들은 전체 어플리케이션 어디서든 사용되고 포커싱 처리나 애니메이션 처리 들을 하기 위해 접근하는 것이 불가피하다.
• 이때 "Ref forwarding"이 좋은 선택지가 될 수 있다.
• 이 기능을 쓰면 그들이 받은 ref를 자동으로 그들의 자식 컴포넌트로 전달(forward)할 수 있다.
• 아래 예제를 보면 Fancy 컴포넌트는 ref를 받아서 그 아래 button에 ref를 전달하고 있다.

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

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

• 이런 방식으로 FancyButton은 DOM node인 button에 ref를 전달하고 사용할 수 있다.

• 단계별로 설명 하자면 아래와 같다

  • 먼저 createRef로 ref를 생성한다.
  • 그 ref를 FancyButton에 prop으로 붙여준다
  • forwadingRef에는 (prop, ref) => 형태로 ref를 넘겨준다
  • 그렇게 전달받은 ref를 에 jsx에 맞게 ref를 넘겨준다.
  • 그러면 이제 ref.current는 button DOM node를 가리키게 된다.

  주의

• ref를 꼭 DOM component에 한정할 필요는 없다. 당신이 만든 component에도 쓸 수 있다.