React 공식문서 뜯어보기-엘리먼트 렌더링

엘리먼트(element)란?

React 앱의 가장 작은 단위입니다. 엘리먼트는 화면에 표시할 내용들을 기술합니다. 브라우저 DOM element와는 다르게 React element는 plain object이며 쉽게 생성할 수 있습니다.

const element = <h1>Hello, World!</h1>;

⚠️ component와 개념을 혼동하지 않도록 주의해야 합니다! element는 component의 구성요소입니다.

DOM에 element 렌더링 하기

React로 구현된 애플리케이션은 일반적으로 하나의 root DOM 노드가 있습니다. React element를 root DOM에 렌더링 하려면 둘 다 ReactDOM.render()로 전달하면 됩니다.

// 화면에 "Hello, World!"가 보일겁니다.

const hello = <h1>Hello, World!</h1>;
ReactDOM.render(hello, document.getElemntById('root'));

렌더링된 element 업데이트하기

React element는 immutable한 객체입니다. 때문에 element는 특정 시점의 UI를 보여줍니다.
지금까지 소개한 내용을 바탕으로 하면 UI를 업데이트하는 유일한 방법은 새로운 엘리먼트를 생성하고 이를 ReactDOM.render()로 전달하는 것 뿐입니다. 실제로 대부분의 React 앱은 ReactDOM.render()를 한번만 호출합니다.

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

React DOM은 해당 엘리먼트와 그 children 엘리먼트를 이전에 렌더링 되었던 엘리먼트와 비교를 하고 바뀐 부분이 있을 때만 DOM을 업데이트 합니다.

이 개념은 virtual DOM을 사용해서 DOM 전체를 다시 렌더링할 필요 없이 실제 DOM에 필요한 최소한만 변경하여 효율성이 높고 버그를 줄일 수 있다는 장점이 있습니다.

참고자료

React 공식문서