React는 컴포넌트 간의 데이터 및 기능을 전달하기 위해 다양한 패턴을 제공합니다. 하지만 때로는 부모 컴포넌트에서 자식 컴포넌트로 Ref를 전달해야 할 때가 있습니다. 이런 경우에 React.forwardRef()를 사용하여 해결할 수 있습니다.

React.forwardRef()란?

React.forwardRef()는 부모 컴포넌트에서 전달한 Ref를 자식 컴포넌트로 전달하고자 할 때 사용하는 함수입니다. 이를 통해 자식 컴포넌트에서 Ref를 사용할 수 있게 됩니다.

const ChildComponent = React.forwardRef((props, ref) => {
  // 자식 컴포넌트에서 Ref를 사용하는 로직
});

// 부모 컴포넌트에서 Ref를 전달하는 예시
const ParentComponent = () => {
  const childRef = useRef();

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

React Hooks와 함께 사용하기

React Hooks는 함수형 컴포넌트에서 상태 관리를 쉽게 할 수 있게 해주는 기능입니다. React.forwardRef()와 함께 사용하면 좀 더 간편하게 Ref를 전달할 수 있습니다. 아래는 React Hooks를 활용하여 React.forwardRef()를 사용하는 예시입니다.

import React, { useRef, forwardRef } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  // 자식 컴포넌트에서 Ref를 사용하는 로직
  
  return (
    <div ref={ref}>
      Child Component
    </div>
  );
});

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

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

위의 예시에서는 forwardRef 함수를 import하고, ChildComponent를 forwardRef로 래핑하고 있습니다. 이제 ChildComponent에서 ref 속성을 사용하여 Ref를 자식 컴포넌트의 DOM 요소에 적용할 수 있습니다.

이렇게 React Hooks와 함께 React.forwardRef()를 사용하면 부모 컴포넌트와 자식 컴포넌트 간에 Ref를 전달하는 것이 더욱 간단하고 효율적으로 처리될 수 있습니다.

#React #ReactHooks