Elements의 특징 및 렌더링하기 [처음 만난 리액트 #13]

4강. Rendering Elements

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

elements의 개념과 역할, elements가 rendering되는 과정에 대해 알아보기 💻

---

React Elements의 특징

React elements are immutable (불변성)

 

im (부정) + mutable (변할 수 있는) = immutable (불변의)

 

한 번 생성된 elements는 변하지 않음 

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

 

 

리액트의 elements는 우리 눈에 보이는 것을 기술한다고 했는데, elements가 변할 수 없다면 화면 갱신이 안 되는 것은 아닐까?

elements는 다양한 형태로 존재할 수 있지만, 한 번 생성된 다음에는 변경이 불가능함

 

 

붕어빵 틀에 반죽을 넣고, 시간이 지나면 그 안에서 붕어빵이 구워져 나옴

구워져 나온 붕어빵의 속 내용은 바꿀 수 없는 것과 같은 이치

 

● 컴포넌트는 일종의 붕어빵 틀

● 붕어빵이 구워져서 밖으로 나오는 과정은 element를 생성하는 것

● 완성된 붕어빵은 element 생성이 끝난 것이기 때문에 변경할 수 없음

 

화면에 변경된 element들을 보여주기 위해서는 기존 element를 변경하는 것이 아니라, 새로운 element를 만들면 됨 

새로운 element를 만들어서 기존 element와 바꿔치기

 

---

리액트의 장점 중 하나로 빠른 렌더링 속도가 있었음

빠른 렌더링 속도를 위해 virtual DOM을 사용

 

virtual DOM의 개념도

 

● 화면에 새로운 내용을 보여주기 위해서 virtual DOM은 변경된 부분을 계산(compute Diff)하고 해당 부분만을 다시 렌더링함(Re-render)

● 여기서 각 원들이 element 

● 빨간색으로 표시된 원들은 변경된 element

 

element는 불변성을 가지고 있기 때문에 화면에 새로운 내용을 보여주기 위해서는 새로운 element를 만들어 기존 element가 연결되어있는 부분에 바꿔서 달면 됨 

 

---

Element 렌더링하기

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

 

 

Root DOM Node

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

 

▲ root라는 id를 가진 div 태그

모든 리액트 앱에 필수적으로 들어가는 중요한 코드

 

● 이 div 태그 안에 React element들이 렌더링되며, 이것을 Root DOM Node라고 부름

● 이 div 태그 안의 모든 것이 React DOM에 의해 관리되기 때문

● 오직 react만으로 만들어진 모든 웹사이트들은 단 하나의 Root DOM Node를 가짐

● 기존에 있던 웹사이트에 추가적으로 react를 연동하게 되면, 여러 개의 분리된 수 많은 Root DOM Node를 가질 수도 있음 

 

 

virtual DOM 그림에서 가장 최상단에 있는 동그라미가 Root DOM Node

 

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

 

▲ Root div에 실제로 React element를 렌더링하기 위해서는 위와 같은 코드를 사용

element를 하나 생성하고, 생성된 element를 root div에 렌더링하는 코드

렌더링을 위해 ReactDOM의 render라는 함수 이용

ㄴ render: 첫 번째 파라미터인 react element를 두 번째 파라미터인 HTML element(DOM element)에 렌더링하는 역할을 함 

 

* React Elements ≠ DOM Elements

React Elements는 리액트의 virtual DOM에 존재, DOM Elements는 실제 브라우저의 DOM에 존재

React Elements가 렌더링되는 과정은 virtual DOM에서 실제 DOM으로 이동하는 과정

 

 

---

렌더링된 Elements를 업데이트 하기

React elements의 중요한 특징: 불변성

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

 

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

setInterval(tick, 1000);

 

위의 예제 코드에서 tick이라는 함수를 정의하고 있음

tick 함수는 현재 시간을 포함하고 있는 element를 생성하여 root div에 렌더링하는 역할

 

● JavaScript의 setInterval 함수를 사용해서 tick 함수를 매 초 1000ms마다 호출

● 이 코드의 실행 결과: 매 초 화면에 새로운 시간이 나옴

● 내부적으로는 tick 함수가 호출될 때 마다 기존 element를 변경하는 것이 아니라 새로운 element를 생성해서 바꿔치기 

 

 

크롬의 개발자 도구를 통해 보면, 갱신되는 부분만 반짝이는 효과

매 초 새로운 element가 생성되어 기존 element와 교체되면서 내용이 변경되고, 변경된 부분에 반짝이는 효과가 나타나는 것 

*** react element의 불변성 때문에 element를 업데이트 하기 위해서는 새로 만들어야 함!