React는 매우 유연한 프론트엔드 라이브러리로, React 컴포넌트 간 데이터 전달이 중요한 측면입니다. 일반적으로 React 컴포넌트에서 부모로부터 데이터를 props로 전달 받는 것은 쉽지만, 비동기적인 상황에서는 데이터가 동적으로 변경될 수 있어서 조금 더 복잡해질 수 있습니다. 이러한 상황에서 React.forwardRef()를 사용하여 데이터를 전달하는 방법에 대해 알아보겠습니다.

React.forwardRef()란?

React.forwardRef()는 React v16.3부터 도입된 기능으로, ref를 자식 컴포넌트로 전달하기 위해 사용됩니다. 이를 통해 부모 컴포넌트에서 자식 컴포넌트로 직접 데이터를 전달할 수 있습니다. 이 기능은 비동기적인 상황에서 특히 유용하며, 코드의 가독성과 유지 보수성을 향상시킵니다.

사용 방법

다음은 React.forwardRef()를 사용하여 데이터를 전달하는 예시 코드입니다.

import React, { forwardRef } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  // 자식 컴포넌트의 로직
  return (
    <div ref={ref}>
      {props.data}
    </div>
  );
});

const ParentComponent = () => {
  const childRef = React.useRef(null);
  const fetchData = () => {
    // 비동기적으로 데이터를 가져옴
    const data = fetchDataAsync();
    // 자식 컴포넌트로 데이터 전달
    childRef.current.setData(data);
  };

  return (
    <div>
      <button onClick={fetchData}>데이터 가져오기</button>
      <ChildComponent ref={childRef} />
    </div>
  );
};

위의 예시 코드에서 ChildComponent는 React.forwardRef()를 사용하여 자식 컴포넌트를 정의합니다. 자식 컴포넌트는 ref를 매개변수로 받고, ref를 자신의 DOM 요소에 연결하여 부모로부터 전달받은 데이터를 렌더링합니다.

ParentComponent에서는 fetchData() 함수를 통해 비동기적으로 데이터를 가져오고, childRef.current.setData(data)를 호출하여 자식 컴포넌트로 데이터를 전달합니다. 이렇게 함으로써 비동기적인 상황에서도 부모 컴포넌트가 자식 컴포넌트로 데이터를 전달할 수 있습니다.

결론

React.forwardRef()를 사용하여 비동기적인 상황에서의 데이터 전달 방식을 구현하는 방법에 대해 알아보았습니다. 이를 통해 React 컴포넌트 간의 데이터 전달을 더욱 유연하게 처리할 수 있으며, 코드의 가독성과 유지 보수성을 향상시킬 수 있습니다.