[React] 엘리먼트

* 엘리먼트

리액트 공식문서는 엘리먼트를 '리액트 앱의 가장 작은 단위' 라고 표현하고 있다. 엘리먼트는 화면에 표시할 내용을 기술하는데, 브라우저 DOM 엘리먼트와는 달리 리액트 엘리먼트는 일반 객체다. 리액트 DOM은 리액트와 일치하도록 DOM을 업데이트한다.

const element = <h1>Hello, world</h1>;

 

 

HTML파일 어딘가에 "root" 라는 id를 가지고 있는 엘리먼트가 있다고 가정하자. 이 안에 들어가는 모든 엘리먼트들을 React DOM 에서 관리하기 때문에 이를 '루트 DOM 노드' 라고 부른다. 리액트 엘리먼트를 DOM 노드에 렌더링하려면 ReactDOM.render()로 전달하면 된다. 

 

function tick() {
    const element = (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {new Date().toLocaleTimeString()}.</h2>
      </div>
    );
	// 리액트 엘리먼트를 DOM에 렌더링
    ReactDOM.render(element, document.getElementById('root'));
  }
  
  // 1초마다 ReactDOM.render() 가 실행됨
  setInterval(tick, 1000);

 

리액트 엘리먼트는 불변객체이기 때문에, 엘리먼트 생성 이후에는 엘리먼트의 자식이나 속성을 변경할 수 없다. 따라서, UI를 업데이트하는 유일한 방법은 새로운 엘리먼트를 만들고 이를 ReactDOM.render() 로 전달하는 것이다. 위 코드에서는 setInterval() 콜백을 이용해 1초마다 ReactDOM.render()를 호출하고 있다. 

 

포인트는 리액트 DOM은 전체를 업데이트하는 것이 아니라 변경된 부분만 업데이트한다는 것이다. 리액트 DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 필요한 경우에만 DOM을 업데이트한다.

 

 

개발자 도구를 통해 확인해보면 위와 같다. 1초마다 UI가 싹 다시 만들어져야 하지만 실제로는 내용이 변경된 텍스트 노드(보라색)만 업데이트되고 있음을 볼 수 있다. 

 

* Reference : 리액트 공식페이지(https://reactjs.org/)