[8장] ReactNode, ReactElement, JSX,Element 의 관계를 설명해주세요

[YunjiNam]

📝 p.254

🧐 ReactNode, ReactElement, JSX,Element 의 관계를 설명해주세요

[dlantjdgkgk]

• ReactNode 는 ReactElement 이외에도 boolean, string, number 등의 여러 타입을 포함하고 있다.
• ReactNode > ReactElement > JSX.Element
• ReactElement는 React 컴포넌트가 반환할 수 있는 가장 기본적인 타입입니다.
• ReactNode는 ReactElement보다 더 넓은 범위의 타입을 포함합니다.
• JSX.Element는 JSX 문법을 사용하는 경우에 한정된 ReactElement와 같은 타입입니다.

[jinsupark4255]

ReactNode

• ReactElement, 문자열, 숫자, 배열, null 또는 boolean과 같은 타입을 포함한다.
• 컴포넌트가 반환할 수 있는 모든 타입을 포괄한다.

ReactElement

• React 요소를 나타내며, React의 createElement() 함수에 의해 반환된다.
• 즉, React 컴포넌트의 인스턴스 또는 DOM 태그를 표현할 수 있다.
• 나 같은 JSX 표현은 ReactElement로 반환된다.
• 타입스크립트에서 ReactElement는 type, props, key 프로퍼티를 포함한다.

JSX.Element

• JSX 문법을 사용해 작성된 요소의 타입이다.

관계 정리

• JSX.Element와 ReactElement는 많은 경우 같은 것으로 취급된다.
• ReactNode는 좀 더 포괄적인 타입으로, ReactElement, 문자열, 숫자 등 거의 모든 것을 포함할 수 있다.