React.FC란?

우선 FC는 Function Component 타입의 줄임말이다. 함수 컴포넌트를 정의할 때 사용되는 타입으로, 이를 사용하여 함수 컴포넌트의 속성(props) 타입을 지정할 수 있다.

그래서 React.FC는?

React에서 제공하는 제네릭(Generic) 타입.

이라 생각하면 된다. 이 타입의 장점은 컴포넌트의 속성(props)에 대한 타입이 자동으로 추론되기 때문에 타입 정의를 생략이 가능하다.

예시

import React from 'react';

interface GreetingProps {
  name: string;
}

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

...

<Greeting name="John" />

위의 코드를 보면, Greeting은 React.FC< GreetingProps >로 정의되어 있다. GreetingProps는 name이라는 문자열 속성(props)을 가지는 인터페이스다.

그래서 사용할 때는 name을 props로 보내 사용하면 되고, number 타입이 들어갈 경우는 오류가 나타난다.

정리하기

React.FC는 함수형 컴포넌트 사용 시 타입 선언을 할 때 사용하면 된다. 사용을 하면 확실하게 함수형 컴포넌트의 속성을 지정할 수 있다.