JSX.element
값-기반 요소 (value-based elements)
사용자가 만든 사용자 정의 컴포넌트로 스코프 내의 식별자에 의해 사용됨
Element를 선언하는 방법은 두가지가 있음.
1. Function Component (FC)
2. Class Component
타스에서는 함수형 컴포넌트로 표현을 해석을 기본으로 하고, 함수형 컴포넌트가 확인되지 않으면 클래스 컴포넌트로 해석함. 기본적으로 JSX의 결과 타입은 any이지만, JSX.element 인터페이스를 통해 해당 타입으로 변경 가능
클래스형 컴포넌트에서 render메소드를 통해 ReactNode를 리턴하는 반면, 함수형 컴포넌트는 ReactElement를 리턴. ReactElement는 React.createElement로 컴파일 되며, JSX.Element는 any타입의 props와 type을 가진 React.createElement이다.
함수형 컴포넌트를 사용한다면 리턴값의 기본 타입으로 JSX.element를 사용해주어야함.
React.FC
FC는 Function Component의 약자로 그대로 넣어서 사용해도 돌아감
React.FC 사용시, Props의 타입을 Generic에 넣어서 사용
React.FC<string>본 컴포넌트는 단순한 함수가 아니라 함수형 컴포넌트임을 명시해주는 역할로 화살표 함수를 사용해 컴포넌트를 정의할 때, 컴포넌트 타입을 정하기 위해 사용되기도 함.
const App : React.FC = () => {}-> class component로 만든 경우, React.ClassComponent사용 가능
타입값이 JSX를 리턴하는 함수이므로 리턴값이 없다면 오류가 발생함
props에 기본적으로 children이 들어있음.
하지만 children이 옵션으로 들어가 있어, 컴포넌트 props의 타입이 정할 수 없는 단점이 있음.
children의 요소로 어떤 타입이 들어올 지 모르기 때문
defaultProps, propTypes, contextTypes 자동완성.
const로 선언되는 컴포넌트를 변수로 생각하지 못하도록 React.FC로 타입을 지정해줌.
그래서 선언된 컴포넌트의 내장함수로 리액트 함수형 컴포넌트의 내장함수들을 사용할 수 있음.
그러나 아직 defaultprops를 아직 인식하지 못하는 성능상의 문제가 존재함.
