React에서는 컴포넌트 간의 데이터 흐름 관리를 위해 다양한 방법을 제공합니다. 그 중 하나는 React.forwardRef()를 사용하여 데이터를 전달하는 것입니다.

React.forwardRef()는 리액트 컴포넌트를 반환하는 함수로, 부모 컴포넌트가 자식 컴포넌트로 데이터를 전달하는 방법을 제공합니다. 이를 통해 자식 컴포넌트는 부모 컴포넌트로부터 전달받은 데이터를 사용할 수 있습니다.

예를 들어, 부모 컴포넌트에서 자식 컴포넌트로 전달해야하는 값을 React.forwardRef()를 사용하여 전달할 수 있습니다.

import React, { forwardRef } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  // 자식 컴포넌트에서 사용할 로직
  return (
    <div ref={ref}>
      <p>{props.data}</p>
    </div>
  );
});

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

  const handleClick = () => {
    console.log(childRef.current); // 자식 컴포넌트의 DOM 요소에 접근
  };

  return (
    <div>
      <ChildComponent ref={childRef} data="Hello, World!" />
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

위 예시에서, ChildComponent는 React.forwardRef()를 사용하여 부모 컴포넌트로부터 전달받은 data 값을 사용하며, ref를 통해 자식 컴포넌트의 DOM 요소에 접근할 수 있습니다.

또한, ParentComponent에서는 childRef를 생성하고, handleClick 함수를 통해 자식 컴포넌트의 DOM 요소에 접근할 수 있습니다.

이와 같이 React.forwardRef()를 사용하면 부모 컴포넌트와 자식 컴포넌트 간의 데이터 흐름을 잘 관리할 수 있습니다. 컴포넌트 간의 상호작용이 필요한 경우 유용한 기능이니 참고해보세요.

추가로 자세한 내용은 React 공식 문서를 참고하시기 바랍니다.

#React #React.forwardRef