오늘 알아 볼 것.
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
불변객체
생성 후 그 상태를 바꿀 수 없는 객체를 말한다.
const 데이터 멤버를 사용하는 경우 같이 일부 속성만 불변인 것도 있다.
현재까지의 내용으로 UI를 업데이트 할 수 있는 방법은 새로운 엘리먼트를 생성하고, 이를 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);
React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교해서 필요한 경우에만(변경된 부분만) DOM을 업데이트 한다.