3. 리액트, 엘리먼트 렌더링

1. React 엘리먼트란 무엇인가?

JSX 문법으로 작성한 표현식을 Babel이 React.createElement() 함수 호출로 컴파일하여 나온 객체를 React 엘리먼트라고 합니다.

 

아래의 두 코드는 동일한 코드입니다.

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

 

React.createElement() 함수 호출로 나온 객체는 아래와 같습니다.

// 주의: 다음 구조는 단순화되었습니다
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

위와 같은 element 변수를 React 엘리먼트라고 합니다. React는 이 객체를 읽어서, DOM을 구성하고 최신 상태로 유지하는데 사용됩니다.

 

2. DOM에 엘리먼트 렌더링하기

index.html 파일에는 아래와 같은 <div>가 존재한다고 가정합니다.

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

이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 루트 DOM 노드라고 부릅니다.

 

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

 

React 엘리먼트를 루트 DOM 노드에 렌더링하려면 둘 다 ReactDOM.render() 함수로 전달하면 됩니다.

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

위처럼 element 변수를 JSX 표현식으로 저장하고 ReactDOM.render 함수에 인자로 element 변수를 전달합니다. 그러면 root 아이디를 가지고 있는 태그에 아래와 같이 해당 element 변수의 내용을 붙일 것입니다.

<div id="root">
	<h1>Hello, world</h1>
</div>

 

3. 렌더링 된 엘리먼트 업데이트하기

React 엘리먼트는 불변객체입니다. 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없습니다. 

 

UI를 업데이트하는 유일한 방법은 새로운 엘리먼트를 생성하고 이를 ReactDOM.render()로 전달하는 것입니다.

 

아래의 예시는 1초마다 현재 시간을 나타내는 시계입니다.

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()를 한 번만 호출합니다.

 

4. 변경된 부분만 업데이트하기

ReactDOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 DOM을 원하는 상태로 만드는데 최소한의 경우에만 DOM을 업데이트합니다.

매초 전제 UI를 다시 그리도록 엘리먼트를 만들었지만 React DOM은 내용이 변경된 텍스트 노드만 업데이트 했습니다.

 

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