Rendering Elements - React

Element란?

Element는 React 앱의 가장 작은 단위이다.
Element는 화면에 표시할 내용을 기술한다.
Component와 혼동하여서는 안 된다.

Rendering Elements in DOM
HTML 파일 내부에 <div>가 있다고 가정해보자.

<div id="root"></div>

이 안에 들어가는 모든 element를 React DOM에서 관리하므로,
이것을 root DOM node 라고 부른다.
React로 구현된 앱은 일반적으로 하나의 root DOM node가 있다.

React element를 root DOM node에 render하려면 둘 다 ReactDOM.render() 에 전달해주면 된다.

const element = <h1>Hello, world</h1>;        //render 하려고 하는 element
ReactDOM.render(element, document.getElementById('root'));   //root DOM node에 element render 하기

Update redered element
React element는 불변객체이다.
element를 생성한 이 후에는 해당 element의 자식이나 속성을 변경할 수 없다.
element는 영화의 한 프레임처럼 특정 시점의 UI를 보여준다.
지금까지의 내용을 바탕으로 하면, UI를 업데이트 하는 유일한 방법은 새로운 element를 생성하고,
이를 ReactDOM.render()로 전달하는 것이다.

똑딱거리는 시계를 예시로 보자.

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

setInterval(tick, 1000)        //매초마다 ReactDOM.render 호출. 실제로는 대부분의 React 앱이 ReactDOM.render()를 한번만 호출한다.

변경된 부분만 업데이트하기
React DOM은 해당 element와 그것의 자식 element를 이전의 것과 비교하고,
DOM을 원하는 상태로 만드는 데 필요한 경우에만 DOM을 업데이트 한다.
매 초 마다 전체 UI를 다시 그리도록 만들었지만 React DOM은 내용이 변경된 텍스트 노드만 업데이트하였다.
이런 접근법은 시간의 변화에 따라 UI가 어떻게 변화할지 고민하는 것 보다 더 많은 수의 버그를 없앨 수 있다.