Rendering이란?

html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering) 이라고 말합니다.

엘리먼트는 React의 가장 작은 단위입니다. 엘러먼트는 화면에 표시할 내용을 담고 있습니다. 브라우저 DOM 엘리먼트와는 다르게 React 엘리먼트는 일반 객체이며 쉽게 생성할 수 있습니다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트합니다. (공식문서)

React 요소가 DOM node에 추가되어 화면에 렌더되려면 ReactDOM.render 함수를 사용합니다. 첫 번째 인자에는 JSX로 React 요소를 인자로 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 container(부모요소)를 전달합니다.

위의 그림을 보면 전체 HTML이 업데이트 되는 것이 아니라 변화하는 부분의 엘리먼트만 바뀌는 것을 알 수 있습니다.