React는 컴포넌트 간 데이터 전달을 위해 다양한 방법을 제공합니다. 그 중에서도 React.forwardRef()를 사용하면 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 수 있습니다. 이를 활용하면 데이터 전달을 위한 더욱 유연한 구조를 만들 수 있습니다.

React.forwardRef()란?

React.forwardRef()는 React에서 제공하는 기능으로, 부모 컴포넌트에서 자식 컴포넌트로 전달되는 ref를 사용할 수 있게 해줍니다. 이를 통해 부모 컴포넌트는 자식 컴포넌트에게 직접적으로 데이터를 전달할 수 있습니다.

사용 방법

다음은 React.forwardRef()를 사용하여 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 예시입니다.

import React, { forwardRef } from 'react';

// 자식 컴포넌트 정의
const ChildComponent = forwardRef((props, ref) => {
  // 자식 컴포넌트에서 ref를 사용할 수 있음
  // 여기서 ref를 사용하여 데이터를 전달할 수 있음
  return (
    <div ref={ref}>
      // 자식 컴포넌트 내용
    </div>
  );
});

// 부모 컴포넌트에서 자식 컴포넌트 사용
const ParentComponent = () => {
  // ref 생성
  const ref = React.createRef();

  // 자식 컴포넌트에 데이터 전달
  const sendDataToChild = () => {
    // ref.current를 통해 자식 컴포넌트에 접근할 수 있음
    console.log(ref.current);
    // 데이터 전달
    // ...
  };

  return (
    <div>
      <ChildComponent ref={ref} />
      <button onClick={sendDataToChild}>자식 컴포넌트로 데이터 전달</button>
    </div>
  );
};

위 예시에서 forwardRef() 함수를 통해 자식 컴포넌트를 정의하고, 부모 컴포넌트에서 ref를 생성하여 자식 컴포넌트에 전달합니다. 이후 ref.current를 통해 자식 컴포넌트로 접근하고 데이터를 전달할 수 있습니다.

결론

React.forwardRef()를 사용하면 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 과정에서 더욱 유연한 구조를 만들 수 있습니다. ref를 활용하여 컴포넌트 간에 데이터를 전달하고 관리할 수 있는 이러한 기능은 React에서 강력한 데이터 전달 방법 중 하나입니다.

자세한 내용은 React 공식 문서(https://ko.reactjs.org/docs/forwarding-refs.html)를 참조해주세요.

#React #ReactForwardRef