개요

안녕하세요😀
오늘은 재사용성을 고려한 컴포넌트를 만들 때 props 중 ReactNode ,ReactElement, ReactChild 타입들을 사용할 때가 있습니다. 그래서 효율적인 타입 지정을 위해 ReactNode, ReactElement, ReactChild이 무엇이고 어떤 차이점이 있는지 알아보겠습니다.

ReactNode, ReactElement, ReactChild가 무엇일까?🤔

타입들을 하나씩 살펴보겠습니다.

📌 ReactNode

type ReactFragment = Iterable<ReactNode>;

interface ReactPortal extends ReactElement {
  key: Key | null;
  children: ReactNode;
}

//ReactNode
type ReactNode = ReactElement | string | number | ReactFragment | ReactPortal | boolean | null | undefined;

첫 번째로 ReactNode 보겠습니다.
ReactNode는 ReactElement를 포함한 상태에서 원시타입을 추가로 포함하고 있는 것을 볼 수 있습니다.
문자열, 숫자 등을 나타낼 수 있다고 보면 될 것 같습니다.

[번외]
위의 정의 된 타입 중 ReactPortal 이 있습니다.. 해당 타입이 생소할 수 있는데 해당 타입은 특정 DOM에 children을 만들때 사용하는 타입입니다. 예시를 한번 보겠습니다.

const CumstomModal = (props: ModalProps) => {
  const ChildrenComponent = React.createComponent('div', { ...props }, props.children);
  const portal = ReactDOM.createPortal(ChildrenComponent, document.body);

  return Portal
};

const App = () => {
  return (
    <CumstomModal />
  );
}

위의 예시는 모달을 정의 및 호출하는 코드입니다.
모달은 웹 페이지에 존재하는 다른 DOM 노드보다 위에 노출되어야 하는 특징을 가진 컴포넌트입니다. 이런 특성을 구현하는 방법은 여러 가지 있습니다. z-index를 높여주거나 태그의 바로 하단으로 옮겨주거나 하는 방법이 있는데 위의 코드는 태그의 바로 하단으로 옮겨준 코드입니다.

📌 ReactElement

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

다음은 ReactElement 타입을 알아보겠습니다. ReactElement는 ReactNode와 다르게 원시 타입이 빠져있고 JSXElementConstructor이라는 타입을 확장하였습니다. ReactElement는 React의 컴포넌트의 인스턴스를 나타내는 JS 객체가 될 수 있습니다.
이 객체는 해당 컴포넌트의 속성(props)과 상태(state)를 포함하고 있습니다. 이런 특징으로 ReactElement는 React에서 UI를 표시하는데 사용됩니다. 함수형 컴포넌트의 기본 반환타입이기도 하며 React.createElement 함수를 호출했을때에도 기본 반환타입이 ReactElement 입니다.

(클래스 컴포넌트는 ReactNode가 기본 반환타입입니다.)

📌 ReactChild

type ReactChild = ReactElement | string | number;

ReactChild는 Deprecated 되었습니다.

ReactNode, ReactElement, ReactChild의 차이점이 뭐지?

위에서 ReactNode, ReactElement, ReactChild이 무엇인지 알아보았습니다. 그러면 이제 이들을 비교하면서 어떤 차이점이 있는지 보겠습니다. 이들의 관계를 그림으로 표현해보겠습니다.

위의 그림처럼 ReactNode > ReactChild > ReactElement 순으로 큰 개념이며 사용이 중지된 ReatChild 타입을 제외하면 ReactNode > ReactElement 입니다.

어떻게 쓰면 좋을까?

이 부분에 대해서 정답을 찾지 못했습니다. 그냥 개인적으로 고민해봤을때는 ReactNode, ReactElement 중 어느게 좋고 나쁘고 보다는 "타입을 사용하는 목적을 생각하면 좋지 않을까?" 라는 결론을 내렸습니다. 저희가 타입스크립트를 사용하는 이유는 타입을 설정함으로써 런타임때 예상하지 못한 이슈를 방지하고자 사용한다고 생각합니다. 그렇기 때문에 만약 React component도 그려질 수 있고 텍스트,숫자 및 배열과 같은 단순한 데이터 형식이 사용될 가능성이 있다면 ReactNode로 정의하고 반면에 단순 UI를 표시하는데 사용한다면 ReactElement로 정의하면 좋을 것 같습니다.