[react type] React.FC

React.FC

React.FC는 TypeScript를 사용하여 React 함수 컴포넌트를 정의하는 데 사용되는 제네릭 인터페이스입니다. FC는 "Function Component"의 줄임말입니다.

 

React.FC를 사용하면 함수 컴포넌트의 props에 대한 타입 선언이 더욱 간편해집니다. 예를 들어, 다음과 같이 사용할 수 있습니다.

 

import React from 'react';

interface Props {
  name: string;
  age: number;
}

//React.FC를 사용하면 return 으로 어떤 값(ReactNode)이든 반환할 수 있습니다.
const MyComponent: React.FC<Props> = ({ name, age }) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};

export default MyComponent;

위의 코드에서 Props 인터페이스를 정의하고, MyComponent 함수 컴포넌트를 React.FC<Props>로 정의했습니다. 이렇게 함으로써 MyComponent의 props가 name과 age 속성을 가져야한다는 것을 명확히 할 수 있습니다.

 

React.FC를 사용하면 함수 컴포넌트의 반환값도 자동으로 ReactNode로 지정됩니다. ReactNode는 React에서 렌더링할 수 있는 모든 것을 나타내는 타입입니다. 따라서, 함수 컴포넌트에서 return 구문을 사용하여 무엇이든 반환할 수 있습니다.