렌더링이란 무엇일까?

렌더링  :  html요소(element), React요소 등의 코드가 눈으로 볼 수 있도록 그리는 것.

element는 react의 가장 작은 단위로, 화면에 표시할 내용을 담고있고, 일반 객체이며 쉽게 생성할 수 있다.

react DOM은 react element와 일치하도록 DOM을 업데이트 한다.

function tick() {
	const element = (
    	<div>
        	<h1>Hello, world!</h1>
            <h2>It is {new Date().toLocaleTimeString()}.<h2>
        <div>
    );
    React.DOM.render(element, document.getElementById('root'));
}

setInterval(tick,1000);

React 요소가 DOM node에 추가되면서 화면에 렌더되려면 ReactDOM.render함수를 사용한다.

처음 인자에는 JSX로 React요소를 인자로 넘기고, 두번째 인자는 해당요소를 렌더하고 싶은 부모요소(container)를 전달한다.

아래 그림처럼 HTML이 전체적으로 업데이트 하는 것이 아닌, 변화부분의 요소(element)만 바뀌는 것을 볼 수있다.

 

 

 

 

 

공식문서

엘리먼트 렌더링 – React