react - intro - createElement

createElement

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다.
Virtual DOM을 사용하여 실제 DOM 업데이트의 성능 비용을 줄인다는 점이다.

Virtual DOM : 새로운 요소가 화면에 추가되면 트리로 표현되는 가상 DOM이 생성되고, 이전과 바뀐 것만 검색하여 실제 DOM과 동기화한다.

리액트 엘리먼트는 단지 리액트에게 DOM 엘리먼트를 구성하는 방법을 알려주는 자바스크립트의 객체로 실제 DOM 객체가 아니다.
리액트 사용을 위한 CDN 추가

<!-- 리액트 공식 사이트의 문서에 웹 사이트 React 추가하기 메뉴의 CDN을 복사해서 넣어준다. -->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

React.createElement : 태그를 표현하는 엘리먼트를 만들 수 있다. ('React' 객체가 가진 createElemnet 메소드)

첫번째 인자: 엘리먼트 타입을 문자열로 정의
두번째 인자: 엘리먼트 프로퍼티 표현
세번째 인자: 엘리먼트 자식 노드 표현

.render() : 가상 DOM을 실제 DOM으로 처리해주는 메서드

const greetingElement = React.createElement('h1', { id:'greeting'}, 'hello world!');
// 이런 내용의 엘리먼트가 만들어지게 된다.
// <h1 id="greeting">hello world</h1>

const textElement = React.createElement('h3', { id: 'name'}, '안녕하세요. 홍길동입니다.');

리액트 엘리먼트와 그 모든 자식 엘리먼트를 함께 랜더링하기 위한 함수

첫번째 인자: 리액트 엘리먼트
두번째 인자: 랜더링이 일어날 대상 DOM 노드

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

history-of-component

• 2013년 리액트가 처음 등장했을 때 컴포넌트를 유일하게 만드는 방법은 createClass 함수를 사용하는 것이었다. 리액트 16(2017년 9월)부터 공식적으로 금지되었다.

• 리액트 16버전부터 함수 기반의 컴포넌트를 생성하는 방법이 추가 되었고 현재는 주를 이루고 있다.

• ES2015(ES6)에 클래스 문법이 도입 되면서 리액트에서도 리액트 컴포넌트를 클래스로 만드는 방법이 도입 되었다.

현재도 class 구문을 사용해 리액트 컴포넌트를 만들 수 있지만 리액트 16버전부터 함수 기반의 컴포넌트를 생성하는 방법이 추가 되었고 현재는 주를 이루고 있다.

<div id="root"></div>
<script>
function HelloWorld() {

            return React.createElement('h1', { className : 'greeting'}, 'Hello World');
        }		// 하단 이미지와 같은 태그 생성

        ReactDOM.createRoot(document.getElementById('root')).render(
            React.createElement(HelloWorld)
        );
  
</script>