Elements 란? (특징 및 렌더링하기)

React Elements 는 아주 중요한 특징을 가지고 있는데, 그것이 바로 불변성이다.

불변성은 말 그대로 변하지 않는 성질을 의미하고, 이는 한 번 생성된 Elements 는 변하지 않는다는 것을 의미한다.

이를 다르게 표현하면 Elements 생성 후에는 children 이나 attributes 를 바꿀 수 없다는 것이다.

 

그렇다면 React Elements 는 우리 눈에 보이는 것을 기술하는 것인데, Elements 가 변할 수 없다면 화면 갱신이 불가능하지 않을까? 라는 의문을 가질 수 있다.

이런 의문을 해소하려면 Elements 의 불변성에 관한 설명을 다시 살펴보아야 한다.

Elements 생성 후에는 children 이나 attributes 를 바꿀 수 없다

즉, Elements 는 다양한 모습으로 존재할 수 있지만, 한 번 생성된 다음에는 변경이 불가능 하다는 뜻이다.

이 그림에는 React 의 Component 와 Element 의 관계가 나타나 있다.

붕어빵이 구워져서 밖으로 나오는 것은 Elements 를 생성하는 것이고, 완성된 붕어빵은 Elements 생성이 끝난 것이기 때문에 변경할 수 없는 것이다.

---

그렇다면 화면에 변경된 Elements 들을 보여주기 위해서는 어떻게 해야할까?

이런 경우에는 기존 Elements 를 변경하는 것이 아니라 새로운 Elements 를 만들면 된다.

즉, 새로운 Elements 를 만들어 기존의 Elements 와 바꾸는 것이다.

이 그림에서 보이는 것처럼, 화면에 새로운 것을 보이기 위해 Virtual DOM 은 변경된 부분을 계산하고 해당 부분만을 다시 렌더링 한다. 여기서 동그란 원들이 바로 Elements 이며, 빨간 원들은 변경된 Elements 이다.

Elements 는 불변성을 갖고 있기 때문에 화면에 새로운 것을 보이기 위해서는, 새로운 Elements 를 만들어 기존 Elements 가 연결되어 있는 부분에 바꿔서 달아주면 된다.

 

실제로 React 를 사용해서 개발하다 보면,

상태 관리와 더불어 화면이 얼마나 자주 갱신되는지가 성능에 큰 영향을 미치게 된다. 

이 과정에서 Elements 가 새롭게 생성된다는 것을 이해하고 있으면 좀 더 효율적으로 개발할 수 있다.

---

 

Elements 를 생성한 이후에 실제로 화면에 보여주기 위해서는 렌더링이라는 과정을 거쳐야 한다.

그렇다면 Elements 를 렌더링하려면 어떻게 해야 할까?

 

먼저 간단한 HTML 코드를 살펴보자

<div id="root"></div>

이 HTML 코드는 root 라는 id 를 가진 div 태그이다.

아주 단순하지만 이 코드는 모든 React 앱에 필수적으로 들어가는 아주 중요한 코드이다.

실제로 이 div 태그 안에 React Elements 들이 렌더링되며, 이것을 Root DOM Node 라고 부르는데, 이 div 태그 안에 있는 모든 것이 React DOM 에 의해서 관리되기 때문이다.

 

오직 React 만으로 만들어진 모든 웹사이트들은 단 하나의 Root DOM Node 를 가지게 되는 반면, 기존에 있던 웹사이트에 추가적으로 React 를 연동하게 되면 여러개로 분리된 수많은 Root DOM Node 를 가질 수도 있다.

이전에 봤던 Virtual DOM 그림에서 가장 최상단에 있는 동그라미가 바로 Root DOM Node 라고 보면 된다.

 

root div 에 실제로 React Elements 를 렌더링하기 위해서는, 아래와 같은 코드를 사용한다.

const element = <h1>안녕, 리액트!</h1>;
ReactDOM.render(element, document.getElementById('root'));

이 코드는 먼저 Elements 를 하나 생성하고, 생성된 Elements 를 root div 에 렌더링하는 코드이다.

렌더링을 위해 ReactDOM 에 render() 라는 함수를 사용하게 된다.

이 함수는 첫 번째 파라미터인 React Elements 를 두 번째 파라미터인 HTML Elements 즉, DOM Elements 에 렌더링 하는 역할을 한다.

 

이때 다시 한 번 React Elements 와 DOM Elements 의 차이에 대해 얘기해보면, React Elements 는 React 의 Virtual DOM 에 존재하는 것이고 DOM Elements 는 실제 브라우저의 DOM 에 존재하는 것이다. 

 

결국 React 의 Elements 가 렌더링 되는 과정은, Virtual DOM 에서 실제 DOM 으로 이동하는 과정이라고 할 수 있다.

---

 

그렇다면 렌더링된 Elements 를 업데이트 하려면 어떻게 해야 할까?

 

Elements 의 주요 특징인 불변성 때문에, Elements 를 업데이트 하려면 Elements 를 다시 생성해야 한다.

function tick() {
	const element = (
    	<div>
        	<h1>안녕, 리액트!</h1>
            	<h2>현재 시간: {new Date().toLocaleTimeString()}</h2>
        </div>
    );
    
    ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

이 코드에서는 tick() 이라는 함수를 정의하고 있다. 

tick() 함수는 현재 시간을 포함하고 있는 Elements 를 생성하여 root div 에 렌더링하는 역할을 한다.

그리고 자바스크립트의 setInterval() 함수를 사용해서 tick() 함수를 매초마다 호출하고 있다.

이 코드를 실행하면 매초 화면에 새로운 시간이 나오게 될 것이다.

 

내부적으로는 tick() 함수가 호출될 때 마다 기존 Elements 를 변경하는 것이 아니라, 새로운 Elements 를 생성하여 바꿔치기 하는 것이다.

이 그림처럼 개발자 도구로 확인해보면, 갱신되는 부분만 반짝이는 효과가 나타나게 된다.

매초 새로운 Elements 가 생성되어 기존 Elements 에서 내용이 변경되기 때문이다.

 

 

 

 

정리 참고

https://www.youtube.com/watch?v=5vtqn4XyYAs&list=PLo3AHtncM26y0qX58gjc_QrkYlBCzQ2R_&index=14