[ReactJS] 랜더링(Rendering)

랜더링(Rendering)

엘리먼트는 리액트 어플리케이션에서 가장 작은 단위이다.

엘리먼트는 화면에서 보여지는 것에 대한 정보를 가지고 있다.

브라우저 엘리먼트인 DOM 엘리먼트와는 달리, 리액트 앨리먼트는 일반 객체이므로 값 싸게 만들수 있다.

React DOM은 React 앨리먼트와 일치하도록 DOM을 업데이트 한다.

리액트에서 앨리먼트와 컴포넌트를 헷갈릴수 있는데, 

컴포넌트에 대한 자세한 설명은 다음 포스팅에서 다루도록한다.

그전에, 간단하게 설명하자면 엘리먼트는 컴포넌트가 무엇인지를 나타낸다고 할 수 있다.

엘리먼트를 DOM에 랜더링 하기

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

우리가 만드는 웹페이지에 div라는 HTML 태그가 있다고 가정하자.

우리는 이것은 root 노드라고 부른다.

이 태그 내부의 모든것이 React DOM에 의해서 관리되기 때문이다.

React로 구축된 애플리케이션은 대게 단일 루트의 DOM 노드를 사용한다.

React를 기존앱에 통합하게 되는 경우 원하는 만큼 만은 분리된 루트 DOM 노드가 생성 될 수 있다.

위의 코드를 실행하면 Hello, world가 출력된다.

랜더링 된 엘리먼트 업데이트

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);

리액트의 엘리먼트는 불변(immutable)하다.

따라서 엘리먼트를 만든 후에 자식 또는 특성을 변경할 수 없다.

엘리먼트는 영화의 단일프레임과 같아서 특정 시점의 UI를 나타낸다.

지금까지 배운 내용으로 UI를 업데이트하는 유일한 방법은, 

새 엘리먼트를 만들어서 ReactDOM.render()에 전달하는 것이다.

이것에 대한 예제가 바로 위의 시간을 출력하는 코드이다.

1초마다 Date값을 받아와서 페이지에 시간을 랜더링하게 된다.

그러나 실제로, 대부분의 React 앱은 ReactDom.render()를 한번만 호출한다.

다음 포스팅에서는 이러한 코드가 어떻게 캡슐화 되는지에 대해서 알아볼 것이다.