함수형 컴포넌트의 타입을 선언하는 방법이 두 가지가 있다.

1. FC 타입 사용

// prop 타입 정의
**interface StarsProps {** 
	star: number;
}

const Stars: React.**FC<StarsProps>** = ({ star }) => {   
	return ( 
		<div>
			{makeStars(star)}
		</div>
	)
}

• 파라미터 타입 정의
  • 리액트에서 함수형 컴포넌트를 위한 FunctionComponent 타입을 제공하며, 줄여서 FC로 사용할 수 있다. 컴포넌트 함수 타입을 정의한 FC에 제네릭<>으로 props 타입을 전달해야 한다.
• return 타입 정의
  • 여기서는 명시하지 않았는데 React.FC 타입에서 함수의 매개변수인 props와 반환값인 JSX가 이미 정의되어있기 때문이다.

1-2. FC타입이란?

// node_modules폴더 하위에 "**@types/react/index.d.ts**"경로

type FC<P = {}> = FunctionComponent<P>;  // 1

interface FunctionComponent<P = {}> {  // 2
	(props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;  // 3
	propTypes?: WeakValidationMap<P>;
	contextTypes?: ValidationMap<any>;
	defaultProps?: Partial<P>;
	displayName?: string;
}

1. FunctionComponent라는 타입에 P를 제네릭으로 받은 것이 타입 FC이다.
2. FC타입을 사용할 때 제네릭을 넘기지 않으면 빈객체를 기본값으로 할당한다.
3. FunctionComponent은 제네릭 P를 넘겨받는 interface 타입이다.
4. 총 5개의 프로퍼티를 갖고 있는데, 하나만 필수이고 물음표가 붙은 나머지 4개는 함수형 컴포넌트에 선택적으로 할당할 수 있다.
5. ReactElement 타입 or null을 반환한다.

2. 일반적인 함수정의 방식

• 함수형 컴포넌트는 곧 함수이므로, 이번에는 일반 함수를 선언하듯이 타입을 정의할 수 있다.

  // prop 타입 정의
  **interface StarsProps {**   
  	star: number;
  }
  
  const Stars = ({ star }: StarsProps): JSX.Element => {  // 1
  	// 로직
  	return ( 
  		<div>
  			{makeStars(star)}
  		</div>
  		)
  }
  

• props를 매개변수로 받고 JSX를 return 해야 한다. 매개변수 타입을 StarsProps로, 반환하는 타입을 JSX.Element로 직접 명시한다.