[리액트] Rendering Elements

Element란

• 리액트 앱을 구성하는 가장 작은 블록들

기존엔 엘리먼트를 DOM의 Element를 의미하는 단어로 사용했다. 하지만 리액트에서의 Element는 리액트 Element를 뜻한다.

 

DOM elements와 React Elements의 차이

리액트 개발 초창기엔 현재 React Element를 Descriptor라고 불렀다. (화면에 나타나는 내용을 기술한다는 의미에서 Descriptor)
Descriptor는 최종적으로 DOM Element 형태로 나타나기 때문에 통일성을 위해 React Element로 변경되었다.

• DOM element는 실제 DOM에 존재하고 React Element는 React의 Virtual DOM에 존재한다.
• React Element는 DOM Element의 가상 표현을 의미한다.
• DOM Element는 React Element보다 많은 정보를 갖고 있기 때문에 크고 무겁다.

리액트는 리액트 엘리먼트를 보고 실제 화면에서 보일 DOM 엘리먼트를 만들어준다.

 

Elements의 특징 및 렌더링

특징 : 불변성 

불변성(Immutable)이란 변하지 않는 성질을 말한다. Element는 불변성을 가지고 있는데 이는 한 번 생성된 엘리먼트는 변할 수 없다는 뜻이다. (생성되면 children, attributes 변경 불가)

 

그렇다면 Element는 어떻게 변경해야 할까? 재생성 후 다시 렌더링

 Elements 렌더링

리액트 앱에 필수적으로 들어가는 루트 돔노드 안에 리액트 엘리먼트들이 렌더링이 된다. 기본적으로 하나의 루트 돔노드를 갖고 있지만 
기존 웹사이트에 추가적으로 리액트를 연동한다면 여러 개의 분리된 루트 돔노드를 가질 수 있다.

인프런 처음 만난 리액트

[무료] 처음 만난 리액트(React) - 인프런 | 강의