Element

React앱에서 가장 작은 단위를 뜻한다.

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

React element는 일반적인 Plain Object이다. 브라우저 DOM과는 다르다. ReactDOM은 이 element와 일치하도록 브라우저 DOM을 업데이트한다.

⚠️ Element와 Component를 혼동할 수 있는데, Element가 Component의 구성요소이다.

DOM에 Element 렌더링하기

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

React는 필요한 부분만 React로 만들 수 있다. 그 기준이 되는 것이 root 노드이다. root 노드 안에 react element들이 존재할 수 있다. 또한, 기존 앱에 여러 곳에서 React를 사용한다면 여러개의 root 노드가 필요할 수 있다.

React Element를 렌더링하기 위해서는 DOM element를 React.createRoot()메소드의 인자로 전달하고, root.render()메소드를 통해 React Element를 전달하여 렌더링한다.

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <h1>나는 react Element입니다.</h1>
root.render(element);

렌더링 된 Element 업데이트하기

React Element는 불변객체이다. 생성 후에는 속성을 변경할 수 없다. 즉, React Element는 영화 속 프레임의 한 장면처럼 UI의 한 장면일 뿐이다. 이 말을 코드로 이해해보면

const root = ReactDOM.createRoot(document.getElementById('root'));

const tick = () => {
  const element = (<div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}</h2>
    </div>);
  root.render(element);
  
}

setInterval(tick, 1000);

1초마다 tick메소드를 실행하고 있고, 그때마다 새로운 element를 생성해 root.render()에 담아 실행하고 있다. 1초마다 시간이 변하는 UI가 생성된다.

재밌는 점은 ReactDOM은 필요한 부분만 변경된다는 점이다. 해당 Element와 그 자식 Element를 이전의 Element와 비교하고 DOM을 원하는 상태로 만드는데 필요한 DOM만 업데이트 한다.

또한, 새로운 Element객체를 넘겨야 렌더링 되고, 기존Element를 그대로 render한다면 렌더링이 진행되지 않는다.

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = (<div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}</h2>
    </div>);
const tick = () => {
  root.render(element);
}

setInterval(tick, 1000);

위의 예시처럼 tick() 함수에서 element를 생성하는 것이 아닌, 이미 생성된 Element를 render() 인자로 넘긴다면 실행만 되고 브라우저의 DOM은 변경되지 않는다. 이는 ReactDOM이 element객체자체의 주소 변화를 감지한다는 것을 알 수 있는 부분이다.