[React.js] 3. Element Rendering (엘리먼트 렌더링)

Element 란 React 를 이루는 가장 작은 단위이다.

 

 

 

React 자습서에 따르면 아래와 같은 표현을 사용하고 있었다.

 

React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다. React를 기존 앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있습니다.

 

이 말을 코드로 다시 되짚어 보면 React가 DOM에 어떻게 렌더링하고 있는지 알 수 있다.

 

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

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

 

html 에서 div 태그안에 있는 root가 존재하고 있는데, React 를 통해 이 태그를 표현할 수 있게 된다.

element 라는 JSX를 가지고, id가 root인 녀석에 Render를 시키는 부분을 볼 수 있다.

 

이 말은 태그 한개에 모든 React 요소를 넣어서 Single Page로 만들 수 있고, 기존 html에 React만 하나의 요소로 넣을 수 있음을 의미한다. (기존 app을 한번에 React로 모두 전환하지 않고, 필요한 부분만 React로 구성할 수 있다. 이런 경우는 React 자습서에서 말하고 있는것같은 경우이다. "원하는 만큼 많은 수의 루트 DOM 노드가 있을 수 있다" )

 

 

위의 예시로 이해해보면 React의 엘리먼트 자체는 불변객체이다.

ReactDOM.render() 를 호출 했을때 비로소 id 가 root인 녀석이 바뀌기 때문이다.

 

예시) 아래와 같이 UI를 업데이트 하기위해 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의 신기한 부분은 위 코드를 개발자 도구를 통해 확인했을 때이다.

우리는 element 라는 <div> , <h1> , <h2> 의 태그를 모두 1초에 한번 업데이트 했음에도 불구하고, 아래와 같이 변경되는 부분만 reloading되는 것처럼 보인다.

(이게 바로 React인가 보다. 코드만 보았을때 업데이트 되는 부분만 React쪽에서 알아서 관리해주는 것 같다.)

 

 

 

 

 

 

 

 

 

출처 : https://ko.reactjs.org/docs/rendering-elements.html

엘리먼트 렌더링 – React