[React] 순수 리액트 (가상 DOM, 리액트 엘리먼트, ReactDOM)

 

🧐 가상 DOM이란?

 

• 실제 DOM에 접근하는 대신, 이를 자바스크립트 객체로 구성해 추상화하여 사용하는 방식입니다.
• 리액트가 모든 처리를 대신 해주기 때문에 위와 같은 DOM API 조작 작업을 직접 신경 쓸 필요가 없습니다.
• 대신 가상 DOM을 다루거나 리액트가 UI를 생성하고 브라우저와 상호작용하기 위해 사용하는 몇 가지 명령만 다루면 됩니다.

 

🧐 React Element (리액트 엘리먼트)

• 가상 DOM은 리액트 엘리먼트로 이루어져 있습니다. 또한 브라우저 DOM은 DOM 엘리먼트로 이루어져있습니다.
• 이 때, 리액트 앨리먼트는 그에 대응하는 실제 DOM 엘리먼트가 어떻게 생겨야하는지 기술해줍니다. (리액트 엘리먼트 -> DOM 엘리먼트)

리액트 엘리먼트 ( React.createElement를 사용해 생성 )

React.createElement("h1", null, "신선한 사과")

React.createElement

• 1번째 인자 : 만들려는 엘리먼트의 타입 정의
• 2번째 인자 : 엘리먼트의 프로퍼티
• 3번째 인자 : 엘리먼트의 자식 노드

 

DOM 엘리먼트

<h1>Fresh Apple</h1>

둘은 같다. 리액트 엘리먼트는 단지 리액트가 DOM 엘리먼트를 구성하는 방법을 알려주는 자바스크립트 리터럴

 

🧐 React DOM

• React DOM이란 Virtual DOM에서 HTML을 생성하는 데 필요한 라이브러리이다.
• React DOM에는 리액트 엘리먼트를 브라우저에 렌더링하는 데 필요한 모든 도구가 들어 있습니다.
• render 메소드와 서버에서 사용하기 위한 renderToString과 renderToStaticMarkup 메소드가 있습니다.

(예시)

var fruit = React.createElement("h1", null, "신선한 사과")
ReactDOM.render(fruit, document.getElementById('react-container'))

ReactDOM.render

• 1번째 인자 : 렌더링할 리액트 엘리먼트
• 2번째 인자 : 렌더링이 일어날 대상 DOM 노드

 아래와 같이 HTML에 정의해둔 react-container라는 id를 가진 div의 자식으로 h1 엘리먼트가 추가됩니다.

<div id="react-container">
	<h1>신선한 사과</h1>
</div>

ReactDOM에서 props.children을 사용해 자식 엘리먼트를 렌더링 할 수 있습니다. -> 컴포넌트 트리

 

(예시)

React.createElement(
	"ul",
    null,
    React.createElement("li", null, "사과 1개"),
    React.createElement("li", null, "포도 2개"),
    React.createElement("li", null, "멜론 5개"),
)

4번째 이후에 추가된 인자는 다른 자식 엘리먼트로 취급됩니다.

<ul>
    <li>사과 1개</li>
    <li>포도 2개</li>
    <li>멜론 5개</li>
</ul>

 

아래와 같이 UI엘리먼트와 데이터를 분리 할 수 있습니다. -> 리액트의 가장 큰 장점

let items = {
	"사과 1개",
	"포도 2개",
	"멜론 5개"
}
React.createElement("ul", {className : "ingredients"},
	items.map((ingredient, i) => 
		React.createElement("li", {key:i}, ingredient))
)