[ReactJS] 리액트 컴포넌트, 엘리먼트

 

React Element : React.createElement()로 정의. 가볍고, stateless 하며 불변하며 DOM Element의 가상 표현식입니다. ReactElement는 가상 DOM 안에 포함되어 있고, 이 개념들이 노드를 생성 - HTML 태그들이 바로 이런 Element (div / table / h1 / Fragment...)

 

var ele = React.createElement('div');
ReactDOM.render(
	ele,
    document.getElementById('exam');
)

JSX는 HTML코드를 ReactElements로 컴파일 아래 코드 형식.
var ele = <div>this is div</div>
ReactDOM.render(
	ele,
    document.getElementById('exam');
)

React Component : React.createClass()로 정의. 엘리먼트가 상태값 없다(stateless)고 했는데 Component는 상태 값이 있습니다(stateful). 

 

var compo = React.createClass({
	render: function(){
    	return(
        	<div className="com1"> hello this is com1 </div>
      	)
    }
})

//위의 코드는 아래와 같이 구현합니다.
import React, { Component } from 'react' 
class ReactClass extends React.Component {
	rend(){
        return (
        	<div className="com1"> hello this is com1 </div>
        )
    }
}

HTML 스러운 태그들은 state값을 가질 수 있는 render()로 반환합니다. state값이 있다면 그 값이 변할 때마다 React Component는 다시 그려집니다.

 

React 컴포넌트의 render() 함수가 호출될 때마다 가상 DOM 전체가 렌더링 후 반환합니다. render()에서 새로운 Element 트리를 생성 후 이전 Element트리와 비교해 변경된 점을 찾아 DOM을 업데이트합니다.

 

정리

리액트 컴포넌트의 상태(state) 값이 바뀌면 원래DOM이 최소한으로 변화하길 원하는데, 리액트가 이것을 도와줍니다!

리액트 Component는 Element로 변환되고, 변환 후 ReactElement는 빠르고 쉽게 DOM을 비교 후 가상 DOM에 삽입됩니다. 리액트가 상태 변화로 수정할 부분을 알게 되면, 이 부분이 실제 DOM에서 변화합니다.

 

참고

http://webframeworks.kr/tutorials/translate/virtual-dom/