[Trouble Shootings #11] React - React.ReactNode vs. JSX.Element 타입

React에서 Layout 같은 Wrapper component를 만들 때,

 

children의 타입을 지정해야 할 필요가 있습니다.

 

저는 보통 React.ReactNode나 JSX.Element 타입을 이용하였습니다.

 

아무 생각 없이 JSX.Element 타입을 이용하다가

 

어느 순간, 타입스크립트 에러가 발생하여 그때 그때 <></> 리액트 프래그먼트를 추가하여

 

여러 개의 child를 한번에 감싸서 넣었는데 생각보다 귀찮았습니다.

 

그래서 한번 보니깐 React.ReactNode는 JSX.Element보다 좀 더 넓은 집합의 개념으로 이해했습니다.

 

JSX.Element 타입이 React.ReactNode 타입의 부분집합인 것 같습니다.

 

React.ReactNode 타입으로 지정하면 JSX.Element[] 타입도 모두 가능합니다.

 

반드시 자식 태그로 하나만 올 경우에는 JSX.Element 타입으로 명시적으로 지정해도 되지만

 

여러 개의 자식 태그가 같이 올 수 있는 경우에는 React.ReactNode 타입이 좀 더 편한 것 같습니다.

---

p.s 1) React.ReactNode <- React.ReactElement <- JSX.Element 타입 순으로 포함 관계가 형성된다고 합니다.

          React.ReactNode에는 null, boolean 등 다양한 타입이 포함되고,
          ReactElement는 JSX.Element 타입에 제네릭 인터페이스를 추가한 형태라고 합니다.

p.s 2) 함수형 컴포넌트는 ReactElement 타입을 반환하고,
          클래스형 컴포넌트는 ReactNode 타입을 반환한다고 합니다. [레퍼런스]

 

p.s 3) 보통 Function Component 의 return type은 명시적으로 ReactElement,

           wrapper component 안에 들어가는 children은 ReactNode 타입으로 지정하는 것 같습니다.