React Rendering

DOM 하니 DOOM이 생각났다

 

목적

---

학교 선배의 무한 스크롤 구현 코드를 보던 중 이해가 되지 않는 Hook과 InterSection API를 보고 이와 관련된 첫 번째 과정으로 리엑트의 렌더링에 대해 이해도를 기르기 위해서 복습하게 되었다.

 

DOM(Document Object Model)

---

리엑트의 랜더링 방식을 알아보기 앞서 웹 페이지가 어떻게 구성되는지 알아보자.

DOM은 Js가 문서 즉, 페이지에 접근하기 위해서 필수적인 객체이다.

 

DOM의 구성과 HTML과의 관계

HTML은 문자열이다. 문자열은 파싱등의 작업을 거쳐야 하기 때문에 조작하기 어렵다는 단점이 있다.

이를 다루기 쉽게 HTML을 파싱하여 구성되는 객체의 집합 형태가 바로 DOM이다.

 

 

DOM을 조작하는 방법

DOM을 조작하려면 DOM 에서 자체적으로 정의하는 인터페이스와 객체를 사용하여 조작해야 한다.

// document 객체에 getElementById()로 접근
document.getElementById()

 

DOM의 문제점?

Js로 DOM을 조작할 때 HTML의 구조를 파악하기 힘들다!

아래 코드가 수억 개가 있다고 생각해 보자 일일이 코드를 파악하는데 얼마나 많은 시간이 걸리겠는가? DOM은 이와 같이 구조를 파악하며 조작하기 어렵다는 단점이 있다.

const my_profile = document.getElementById("MyProfile")

document.createElement(my_profile)

 

일관성이 없다!

DOM API는 Live Collection, Static Collection이라는 상태가 존재한다.

Live Collection은 DOM의 실시간 상황에 따라 값이 바뀌는 상태를 뜻하고 Static Collection은 그 반대 상태를 뜻한다. 따라서 일관성이 없다는 것이다.

 

DOM의 문제점을 어떻게 해결할 수 있을까?

가장 쉽고 명료한 해결책이 있다. 바로 DOM을 직접 사용하지 않는 것이다.

React는 DOM 조작과 같은 어렵고 복잡한 작업을 직접 수행하며 다루기 쉬운 API를 제공해 준다.

즉, HTML의 조작이 어려워 DOM을 사용하는 것이고 DOM 조작이 불편하여 React를 사용하는 것이다.

 

가상 돔(Virtual DOM)

---

그럼 리엑트는 어떻게 DOM을 직접 조작하는 방식을 대체하게 되었을까?

 

 

VDOM은 리엑트가 실제 DOM을 추상화한 가상의 돔 구조이다.

리액트는 컴포넌트의 상태가 변하면 VDOM을 업데이트하고, 이전 VDOM과 비교하여 변경 사항을 찾아낸 다음 연관된 최소한의 연산만 수행하여 실제 DOM을 업데이트한다. 이를 통해 개발자는 DOM을 직접 조작하는 불편한 과정에서 벗어나게 되었다.

 

리엑트에서의 렌더링이란?

---

이제 본격적으로 리엑트에서의 렌더링에 대해 알아보자. 리엑트에서의 렌더링은 리엑트가 컴포넌트에게 Props와 State를 기반으로 너의 UI는 어떻게 생겨야 해?라고 물어보는 과정이다.

이 컴포넌트들과 상호작용하려면 UI에 내재된 데이터 모델(State)을 변경하는 것으로 상호작용할 수 있다.

이 데이터 모델이 업데이트되면 React 컴포넌트는 비로소 렌더링이 되게 되는 것이다.

 

간단하게 나타낸 리엑트 랜더링 과정

 

렌더링 페이즈

---

리액트의 렌더링 과정인 렌더링 페이즈에 대해서 간단하게 알아보자.

 

Render Phase

컴포넌트를 렌더링 하고 변경 사항을 계산하는 단계(VDOM을 조작하는 단계)

 

Commit Phase

변경 사항을 실제로 DOM에 적용하는 단계

이때 유의할 점은 렌더링과 DOM을 업데이트하는 것의 차이이다. 부모 컴포넌트가 렌더링 되어 컴포넌트가 다시 렌더링 되더라도 최종적으로 생성된 React Element가 동일하다면 DOM 업데이트는 발생하지 않게 된다.

 

Reconciliation(재조정)

---

리엑트가 렌더링을 최적화하는 방법을 알아보자.

 

 

리엑트는 기존 컴포넌트와 현재 컴포넌트의 상태를 비교하여 업데이트가 필요한지 판단하는데 이때 업데이트가 필요하다고 판단된 렌더링을 수행하게 된다.

이 때 유의할 점은 부모 컴포넌트가 렌더링 될 시 자식 컴포넌트도 같이 렌더링 된다는 점이다.

 

애플리케이션 상태 관리

---

리엑트에서 렌더링이 일어나는 경우를 알아보자.

리엑트에서 렌더링은 상태 또는 프롭스가 변할 때 일어난다.

 

State

컴포넌트의 상태를 나타낸다.

 

Props

컴포넌트 간 데이터와 상태를 전달할 때 사용한다.

 

상태 끌어올리기

상위 컴포넌트 → 하위 컴포넌트(단방향 데이터 흐름)

하위 컴포넌트로 동일한 상태를 변경해야 한다면 Props를 통해 상태를 전달해 주면 된다.

 

하위 컴포넌트 → 상위 컴포넌트(역방향 데이터 흐름)

상위 컴포넌트의 상태를 변경 해야 한다면 Props로 상태를 업데이트하는 함수를 전달해주면 된다.

 

마치며…

---

이번 시간에는 리엑트 렌더링의 전체적인 구조와 개념을 알아볼 수 있었다.

다음 시간에는 React Hook을 알아보며 더 자세히 상태 관리를 해보자.

 

참고 자료

---

https://velog.io/@hyunjine/리액트-렌더링에-대한-이해

리액트 렌더링에 대한 이해

 

https://velog.io/@hyunjine/Thinking-in-React#reconciliation 재조정

Thinking in React

 

https://joong-sunny.github.io/react/react2/#️꼬리질문 1-vdom 없으면-그렇게-안 되나요

[리액트] Virtual DOM과 diffing