2-2 React Element의 특징

불변성

Element 생성 후에는 Children이나 attributes를 바꿀 수 없다.

한번 생성된 후에는 변경이 불가능하다.

따라서 변경을 하고 싶다면 새로운 element를 생성 후 변경 후 바꿔야 한다.

 

Elements 렌더링 하기

element를 생성 후 보여주기 위해서는 렌더링이라는 과정을 거쳐야 한다.

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

const element = <h1>안녕, 리엑트!</h1>
ReactDOM.render(element, document.getElementById('root'));

element를 생성 후 root div에 렌더링하는 과정

 

렌더링된 Elements  업데이트 하기

function tick() {
    const elements =(
        <div>
            <h1>안녕, 리엑트!</h1>
            <h2>현재 시간: {new Date().toLocaleTimeString()}</h2>
        </div>
    );
    
    ReactDOM.render(elements, document.getElementById('root'));
}

setInterval(tick, 1000);

매초 새로운 Element를 생성하여 1000마다 바꿔준다.