• 리액트를 타입스크립트로 작성할때 @types/react 패키지에 정의된 리액트 내장타입을 활용

함수 컴포넌트 타입

//함수 선언을 사용
function Welcome(props: WelcomeProps): JSX.Element {
  return <div></div>;
}

// 함수 표현식을  사용한 방식 3가지
const Welcome2: React.FC<WelcomeProps> = ({ name }) => {
  return <div></div>;
};

const Welcome3: React.VFC<WelcomeProps> = ({ name }) => {
  return <div></div>;
};

const Welcome4 = ({ name }: WelcomeProps): JSX.Element => {
  return <div></div>;
};

• 18v에서는 VFC가 사라지고, FC의 기본 옵션이 children 있음에서 없음으로 변경

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

3가지 모두 리액트의 요소를 나타내는 타입인데, 차이점이 존재한다.

JSX.Element  <  React.ReactElement  < React.ReactNode   ( 포함관계)

JSX.Element

declare global {
  namespace JSX {
    interface Element extends React.ReactElement<any, any> {}
  }
}

• JSX.Element 타입은 ReactElement를 확장하고 있는 타입이고, 글로벌 네임스페이스에 정의되어있어 외부 라이브러리에서 컴포넌트 타입을 재정이 할수 있는 유연성을 제공.
• JSX.Element는 ReactElement의 특정 타입으로 props와 타입 필드를 any 로 가지는 타입
• 즉 컴포넌트 타입을 재정의 하거나 변경이 용이

interface Props {
  icon: JSX.Element;
}

const Item = ({ icon }: Props) => {
  const iconSize = icon.props.size;
  return <li>{icon}</li>;
};

const App = () => {
  return <Item icon={<Icon size={14} />} />;
};

⚛️ JSX.Element

• 트랜스파일러는 JSX 문법을 createElement 메서드 호출문으로 변환하여 아래와 같이 React Element 객체를 생성