React 함수 컴포넌트(Functional Component, FC)로 데이터를 props로 전달하는 방법은 다음과 같습니다:

함수 컴포넌트 정의: 함수 컴포넌트를 정의할 때 props 매개변수를 사용하여 데이터를 전달합니다.

import React, { FC } from 'react';

interface MyComponentProps {
  data: string; // 데이터의 타입에 따라 수정
}

const MyComponent: FC<MyComponentProps> = (props) => {
  return <div>{props.data}</div>;
};

컴포넌트 사용: 다른 컴포넌트에서 데이터를 props로 전달할 때는 컴포넌트를 사용할 때 props를 넘깁니다.

const ParentComponent: FC = () => {
  const dataToPass = "Hello, World!"; // 전달할 데이터

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

위의 코드에서 MyComponent는 data prop을 받아서 화면에 표시합니다. ParentComponent에서 MyComponent를 사용할 때 data prop에 데이터를 전달합니다.

이와 같이 React 함수 컴포넌트를 정의하고 사용할 때, props를 사용하여 데이터를 전달할 수 있습니다. Props는 컴포넌트 간에 데이터를 효율적으로 전달하는 데 사용됩니다. 필요한 데이터를 props로 전달하여 컴포넌트를 재사용하고 데이터를 동적으로 표시할 수 있습니다.