사용법은 다음과 같습니다:

const MyComponent = React.forwardRef((props, ref) => {
  // 컴포넌트 내용
});

const ParentComponent = () => {
  const ref = useRef();

  return (
    <div>
      <MyComponent ref={ref} />
    </div>
  );
});

MyComponent 컴포넌트를 생성할 때 React.forwardRef() 메소드로 감싸주고, ref를 받아와서 원하는 위치에 사용할 수 있습니다. ParentComponent와 같이 ref를 사용하는 부모 컴포넌트에서 ref를 생성하고 MyComponent에 전달할 수 있습니다.

React.forwardRef() 메소드의 주요 장점은 다음과 같습니다:

1. ref 전달의 간결함: React.forwardRef()를 사용하면 ref를 명시적으로 전달할 필요가 없습니다. 컴포넌트를 다른 컴포넌트에 렌더링할 때 필요한 ref가 자동으로 전달됩니다.

2. 컴포넌트 구조의 유지: Ref 전달을 위해 컴포넌트 구조를 변경할 필요가 없습니다. 기존의 컴포넌트 계층 구조를 그대로 유지할 수 있습니다.

React.forwardRef() 메소드는 리액트에서 ref를 다루는 작업을 단순화하고, 컴포넌트 간의 통신을 편리하게 만들어주는 유용한 기능입니다.

• 참고 자료:
  • React 공식 문서 - Forwarding Refs
  • React Forward Refs Explained #React #ref