요소의 렌더링

 

const element = <h1>나는 요소이다.</h1>;

 

위와 같은 React앱의 요소는 순수한 객체이고 생성 비용이 저렴합니다.

 

DOM에서 요소 렌더링하기

 

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

 

HTML 파일 어딘가에 <div> 태그가 있다고 생각해봅시다. 위 태그는 루트 DOM이라고 부릅니다. 우리가 생성한 React 요소들을 렌더링하게 되면 위 메인 루트에 다시 렌더링됩니다. 생성한 모든 React 요소들은 위 <div>태그에 붙게 된다는 말 입니다.

 

const element = <h1>나는 요소다.</h1>;

const element2 = () => {
    return (
        <Fragment>
            {element}
            <h2>리액트 입니다.</h2>
        </Fragment>
    )
};

ReactDOM.render(
  element2,
  document.getElementById('root')
);

 

렌더링된 요소 업데이트

 

React 요소는 변경불가능합니다. 아래의 예제 코드를 보면 1초마다 새롭게 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 어플리케이션은 ReactDOM.render()를 한 번만 호출합니다.

React DOM은 요소와 자식을 가상의 DOM에서 이전 요소와 비교해서 변경된 부분만 DOM 업데이트를 합니다. 따라서 일반적으로 Jquery 라이브러리등과 같이 DOM 트리를 직접 조작해 변경하는 것과 달리 가상의 DOM을 이용하는 것이 차이점이라고 볼 수 있습니다.

 

요소의 렌더링