[React 리액트] 엘리멘트 렌더링

> #### 엘리먼트

+ 엘리먼트의 정의

+ 리액트 앱의 가장 작은 빌딩 블록들

+ 화면에 나타나는 내용을 기술하는 자바스크립트 객체

+ 리액트 엘리먼트는 DOM 엘리먼트의 가상 표현

+ 엘리먼트의 생김새

+ 엘리먼트는 자바스크립트 객체 형태로 존재

+ 컴포넌트 유형과 속성 및 내부의 모든 자식에 대한 정보를 포함하고 있는 일반적인 자바스크립트 객체

+ 엘리먼트의 특징

+ 불변성을 갖고 있음

+ 엘리먼트 생성 후에는 자식이나 속성을 바꿀 수 없음

 

> #### 엘리먼트 렌더링하기

+ 렌더링을 위해 ReactDOM의 render()라는 함수를 사용

+ 리액트 엘리먼트를 HTML 엘리먼트에 렌더링하는 역할

+ 렌더링되는 과정은 Virtual DOM에서 실제 DOM으로 이동하는 과정

 

> #### 렌더링된 엘리먼트 업데이트하기

+ 엘리먼트는 한 번 생성되면 바꿀 수 없기 때문에 엘리먼트를 업데이트하기 위해서는 다시 생성해야 함

+ 기존 엘리먼트를 변경하는 것이 아니라 새로운 엘리먼트를 생성해서 바꿔치기하는 것