타입스크립트를 사용한 리액트 함수형 컴포넌트의 인터페이스 정의

// 제네릭 P의 기본값이 빈 객체 리터럴{}
// P가 명시되지 않으면 기본값으로 빈 객체를 갖는다
type FC<P = {}> = FunctionComponent<P>;
   
// 제네릭 타입 P를 받는다. 컴포넌트의 props의 형태를 정의
interface FunctionComponent<P = {}> { 
   // props와 선택적으로 context를 받아 ReactNode를 반환한다.
   (props: P, context?: any): ReactNode;
    // React의 prop 검증을 위한 속성, 선택적 속성, P타입에 대해 WeakValidationMap이나 undefined 이다
    // WeakValidationMap은 React의 prop 검증 시스템에서 사용되는 타입으로, 부분적으로 엄격하지 않은 검증을 의미한다.
    // propTypes에 정의된 각 필드의 타입이 기대하는 타입과 정확히 일치할 필요는 없다.
    // 대신 타입이 "호환될 수 있는" 범위 내에서 허용된다.
    // 예를 들어 number타입이 기대되는 곳에 number나 이와 호환될 수 있는 다른 타입(null이나 undefined등)이 제공될 수 있다.
    // 종종 타입 검증을 유연하게 할 때 유용하다.
    propTypes?: WeakValidationMap<P> | undefined; 
    // 사용할 context의 tpye을 검증하기 위한 규칙을 정의, 선택적 속성, any타입의 context, 검증할 수 있는 ValidationMap 이나 undefined 이다
    // ValidationMap
    // 모든 props에 대한 타입이 정확히 일치해야 한다.
    // 예를 들어, prop의 타입이 number로 선언되었다면, 반드시 number타입의 값이 제공되어야 한다.
    // 필수적으로 제공되어야 하는 prop이 누락되었을 때도 경고를 발생한다.
    contextTypes?: ValidationMap<any> | undefined;
    // 기본 props값을 설정하는 속성, 선택적 속성, Partial<P>는 P타입의 모든 속성이 선택적이 되도록 만들어, 일부만 제공될 수 있도록 한다.
    // 선택적 속성
    defaultProps?: Partial<P> | undefined;
    // 디버깅을 돕기 위해 컴포넌트의 이름을 명시적으로 설정할 수 있는 속성, 선택적 속성
    displayName?: string | undefined;
}