[React] Element란?

12개의 목차중에 3개까지 왔네요. 이번 글에서는 React Element에 대해 알아보겠습니다.

Element란 ? 

React Element는 React가 화면에 렌더링할 수 있는 단순한 객체입니다. 이는 JavaScript 객체로 HTML 태그 또는 React 컴포넌트를 나타내며 React의 가상 DOM을 구성하는 기본 단위입니다.

 

이 React Element는 Plain Object 이며 Plain Object 이기 때문에 생성하는데 비용이 적게 듭니다.

또한 변할수 없는 객체입니다.

 

이렇게 생성된 React Element는 DOM Element와 React Element가 일치 하도록 DOM을 업데이트하는데 이 업데이트는 React Element를 다시 렌더링하는것입니다라고 설명되어있네요.

 

같은 Element아닌가요? 왜 같은 Element를 생성하고 다시 렌더링 하죠? 리소스 낭비아닌가요? 라고 생각이 들었습니다 어리석었던 저는 그만 저런생각을 해버렸는데 이해가 부족했던것이였습니다. 아래에서 업데이트 과정을 통해 자세하게 설명해볼게요.

React Element가 렌더링되기까지

React는 가상 DOM을 사용하여 실제 DOM을 효율적으로 업데이트합니다. 다음 과정이 이루어짐니다.

1. Reacrt Element들이 DOM Element에 소속된다.
2. 브라우저가 소속된 React Element들을 DOM Element로 인지한다.
3. DOM Element로 인지된 Reacrt Element들을 렌더링한다.

DOM Element에 인지되다?

React Element가 어떻게 DOM Element로 인지될까요?

 

1번에서 React Element들이 어떻게 DOM Element에 소속되는가하면 모두 아래 div 태그에 소속된다.

<div id ='root'></div>

 

이름은 root DOM Node이며 모든 React Element의 근원입니다.

위 render라는 메서드에서는 2가지 argument를 받고 있는데, 첫번째는 element, 두번째는 root DOM Node입니다.

 

이렇게 ReactDOM에서 render함수를 통해 특정 React Element를 root DOM Node에 소속시키고, DOM Element로 인식 후 렌더링하는 과정을 거쳐서 사용자에게 전달될 수 있습니다. 

 

처음엔 어려운데 글을쓰며 정리하니 뭔가 정리된 기분이네요 하하,,,

React Element의 업데이트

처음에 소개드린 특성중에서 Immutable한 속성을 가지고있는데, 처음 렌더링 된 이후에는 props가 변경될 수 없습니다.

그리고 렌더링 된 특정 시점의 UI를 나타냅니다.

 

위처럼 불변한 객체이기때문에 React Element를 업데이트 하는 방법은 React Element를 새로 생성하고 render 메서드를 통해 실행시킵니다.

 

 

 

이번글에서는 Element에 대해 알아보았는데 쉽게 만들어지는건 역시없네요. 예비군갔다왔는데 그것또한 쉽지않았습니다... 다음글에서는 Comoponent와 Props에 대해 알아보겠습니다. 오늘도 빡코딩!