https://github.com/woowa-typescript/woowahan-typescript-with-react-example-code/tree/main/8장

8.1 리액트 컴포넌트의 타입

1. 클래스 컴포넌트 타입

interface Component <P = {}, S = {}, SS = any> extends ComponentLifecycle<P, S, SS> {}

class Component<P, S> {
	/* ... 생략 */
}

class PureComponent<P = {}, S = {}, SS = any> extends Component <P, S, SS> {}

• P와 S는 각각 props와 상태(state)를 의미

interface WelcomProps {
	name : string
}

class Welcome extends React.Component<WelcomeProps> {
	/* ... 생략 */
}

2. 함수 컴포넌트 타입

// 함수 선언을 사용한 방식
function Welcome(props: WelcomeProps) : JSX.Element {}

// 함수 표현식을 사용한 방식 - React.FC 사용
const Welcome: React.FC<WelcomeProps> = ({name}) => {};

// 함수 표현식을 사용한 방식 - JSX.Element를 반환 타입으로 지정
const Welcome = ({name}: WelcomeProps): JSX.Element => {};

• 가장 많이 보는 형태는 React.FC 타입 지정하는 것
  • FC는 FunctionComponent의 약자
  • 리액트에서 함수 컴포넌트의 타입 지정을 위해 제공되는 타입
• React.FC와 React.VFC는 children타입을 허용하는지에대한 차이
  • FC는 children을 암묵적으로 포함
  • 리액트 v18로 넘어오면서 React.VFC삭제
    • React.FC에서 children이 사라짐
      • 앞으로는 React.FC 또는 props 타입 * 반환 타입을 직접 지정하는 형태로 타이핑 해줘야함

3. Children props 타입 지정

type PropsWithChildren<P> = P & { children?: ReactNode | undefined };

• 가장 보편적인 children 타입은 ReactNode | undefined
• ReactNode는 ReactElement외에 boolean, number 등 여러 타입을 포함하고 있는 타입
  • 더 구체적으로 타이핑 하는 용도에는 적합 X
  • 특정 문자열만 허용하고 싶으 ㄹ때는 children에 대해 추가로 타이핑
• children에 대한 타입 지정은 다른 prop 타입 지정과 동일한 방식 지정 가능

// example 1
type WelcomeProps = {
  children: "천생연분" | "더 귀한 분" | "귀한 분" | "고마운 분";
};

// example 2
type WelcomeProps = { children: string };

// example 3
type WelcomeProps = { children: ReactElement };

4. render 메서드와 함수 컴포넌트의 반환 타입 - React.ReactElement vs JSX.Element vs React.ReactNode

• React.ReactElement, JSX.Element, React.ReactNode 타입은 쉽게 헷갈릴 수 있다.

interface ReactElement<
  P = any,
  T extends string | JSXElementConstructor<any> =
    | string
    | JSXElementConstructor<any>
> {
  type: T;
  props: P;
  key: Key | null;
}