INTRO

1-1. 기본 사용법

• React.createElement를 사용해 h1 태그를 표현하는 엘리먼트를 만들 수 있음
  • 첫 번째 인자 : 엘리먼트 타입을 문자열로 정의
  • 두 번째 인자 : 엘리먼트 프로퍼티 표현
  • 세 번째 인자 : 엘리먼트 자식 노드 표현
• 렌더링 과정에서 리액트는 이 엘리먼트를 실제 DOM 엘리먼트로 변환.
• 리액트 엘리먼트는 단지 리액트에게 DOM 엘리먼트를 구성하는 방법을 알려주는 자바스크립트 객체로 실제 DOM 객체가 아님
• document.XXX는 실제 DOM 객체를 활용하는 것이기 때문에 리액트와 혼용해서 사용 불가
• 리액트 엘리먼트와 그 모든 자식 엘리먼트를 함께 랜덜이 하기 위한 함수
  • 첫 번째 인자 : 리액트 엘리먼트
  • 두 번째 인자 : 렌더링이 일어날 대상 DOM 노드

 ReactDOM.render(
            greetingElement,
           document.getElementById('root')
       );

• 16버전 이전의 엘리먼트는 한 엘리먼트만 렌더링 가능했지만, 이후 버전에서는 배열을 렌더링 할 수 있음

ReactDOM.render(
            [greetingElement, textElement],
            document.getElementById('root')
        );

• 18 버전

ReactDOM.createRoot(document.getElementById('root').render([greetingElement, textElement])

1-2. 컴포넌트

• 리액트 컴포넌트를 클래스로 만드는 방법
  • 자주 사용하지는 않음

class HelloWorld extends React.Component{
	render(){
		return React.createElement(
			'h1',
			{className : 'greeting'},
			'Hello World'
			);
		}
}

• 함수 기반의 컴포넌트 생성하는 법

function HelloWorld(){
            return React.createElement('h1', {className : 'greeting'}, 'Hello World');
        }

        ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(HelloWorld));