typescript ReactElement ReactNode JSX.Element 차이

render

render() 함수는 다음 중 하나를 반환하여야한다.

1. React Element

• JSX를 사용하여 생성된다.

2. 배열과 Fragment

• render()를 통하여 여러개의 Element를 반환한다.

3. Portal

• 별도의 DOM 하위트리에 자식 엘리먼트를 렌더링한다.

4. 문자열과 숫자

• 이 값들은 DOM상에 텍스트 노드로서 렌더링된다.

5. Boolean 또는 null

• 아무것도 랜더링 하지 않는다.

render()는 순수한 함수여야 한다.
컴포넌트의 state를 변경하지 않고 호출될 때마다 동일한 결과를 반환해야한다.
또한 브라우저와 직접적으로 상호작용해서는 안된다.

ReactNode

ReactNode는 ReactChild 등등 많은 것을 포함한다.
제일 범용적으로 사용할 수 있는 것 같다..!(다른 관점에선 리펙토링 할 수 있는 부분)

클래스형 컴포넌트의 반환값이다!

type ReactNode =
  | ReactChild
  | ReactFragment
  | ReactPortal
  | boolean
  | null
  | undefined;

ReactElement

ReactElement는 type, props, 그리고 key를 가진 객체이다.

예전 게시글에서 알아본 것 처럼 함수형 컴포넌트의 반환값이다!

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

JSX.Element

JSX.Element는 any type의 generic type인 ReactElement이다.
전역으로 선언되어있어 라이브러리들이 구현하여 사용할 수 있다.

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

++추가 React.FC

React.FC는 children이 포함되어있어 컴포넌트의 props의 타입 처리가 어렵다.

차라리 위의 ReactElement나 ReactNode를 적용 후 children의 타입을 명시하는 것이 좋다..!