React에서 렌더링이란 무엇일까? +DOM

렌더링이란?

사용자 화면에 View(내용)를 보여 주는 것을 렌더링이라고 한다.

---

그렇다면 리액트 라이브러리는 뷰(View)를 어떻게 렌더링 하길래 데이터가 변할 때마다 새롭게 리 렌더링 하면서 성능을 아끼고, 최적의 사용자 경험을 제공할 수 있을까??

 

이것의 해답은 바로 초기 렌더링과 리렌더링에 있다.

---

초기 렌더링

리액트는 맨 처음 어떻게 화면에 보여질 지를 다루는 render() 함수가 존재한다.

이 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다.

 

render() 특징

render() 함수는 html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 동작하는지에 대한 정보를 지닌 객체를 반환한다.

또, 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있어, render 함수가 실행되면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링 된다.

 

(재귀적으로 렌더링을 한다는 것은 다음과 같이 표현할 수 있을 것 같다. Child 라는 컴포넌트가 Parent 컴포넌트 안에 들어가 있는 경우에 Parent 렌터링을 시작하고, Child 컴포넌트를 읽은 시점에 Child 컴포넌트를 먼저 렌더링을 하게 된다. 이렇게 순차적으로 렌더링을 한다고 이해하시면 될 것 같다.)

 

render() 작동 원리

1. 최상위 컴포넌트부터 렌더링 작업이 다 끝낸다.

2. 렌더링 작업에 대한 정보들을 가지고 HTML 마크업을 만든다.

3. 이를 실제 페이지의 DOM 요소 안에 주입한다.

---

리 렌더링 (re-rendering)

리액트에서 뷰(View)를 업데이트할 때는 "업데이트 과정을 거친다" 보다는 "조화 과정을 거친다"라고 표현하는 것이 더 정확하다.

그 이유는 컴포넌트에서 데이터에 변화가 있을 때마다 뷰(View)가 변형되는 것처럼 보이지만, 실제로는 새로운 요소로 갈아 끼우기 때문이다.

이 작업 또한 render() 함수가 하며 컴포넌트는 데이터를 업데이트했을 때 단순히 업데이트한 값을 수정하는 것이 아니라, 새로운 데이터를 가지고 render 함수를 또다시 호출한다.

그러면 그 데이터를 지닌 뷰(View)가 새롭게 생성되는 것이다.

하지만 render 함수가 반환한 새로운 뷰는 곧바로 DOM에 반영하지 않고, 이전 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교한다.

둘의 차이를 비교 후, 원하는 뷰로 리 렌더링 즉, 새로운 요소로 갈아 끼운다라고 볼 수 있다.

 

즉 정리하자면,

1. 데이터를 업데이트 한다.

2. 업데이트 된 데이터를 이용한 render 함수를 리렌더링한다.

3. 이전의 컴포넌트, 리렌더링된 컴포넌트의 차이를 비교한다.

4. 바뀐 요소들만 DOM에 반영한다.

 

---

 

정리 

리렌더링이라는 것은 렌더링이 다시 발생하는 것이다. 렌더링이라는 것은 화면상에 뷰(내용)를 보여주는 것이다. 

리액트에서 리렌더링은 상태가 변화할 때 발생하는데 Virtual DOM에서 변경된 혹은 업데이트된 내용을 이전 값과 비교하여 변경된 값에 대해 렌더링을 해주는 (DOM 트리를 업데이트해주는) 것을 의미한다. 이런 과정은 보기엔 처음부터 다시 렌더링 하는 것처럼 보일 수 있으나 사실은 최적화 과정으로 렌더링 되었다고 알아두면 될 것 같다.

---

DOM

DOM(Document Object Model)은 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다.
DOM(Document Object Model)을 영어 뜻풀이 그대로 하자면 문서 객체 모델을 의미한다.
문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는 (메모리에 보관할 수 있는) 객체를 의미한다.

 

HTML의 DOM트리

DOM은 HTML과 스크립팅 언어(Javascript)를 서로 이어주는 역할

---

가상 돔(Virtual DOM) 이란?

Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용 한다.

리액트가 가상돔을 반영하는 절차

 

EX) 특정 페이지에서 데이터가 변했다고 가정 했을 경우.

 

- 리액트를 이용해 돔을 업데이트 시키는 절차

 

1. 데이터가 업데이트 되면, 전체 UI를 Virtual DOM에 리렌더링함

2. 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교함 (가상 돔 끼리 비교)

3. 바뀐 부분만 실제 DOM에 적용이 됨

 

(컴포넌트가 업데이트 될때 , 레이아웃 계산이 한번만 이뤄짐)