Skip to content

[2주차] virtualDOM #150

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Tanney-102 wants to merge 1 commit into
base: Tanney-102
Choose a base branch
from
+41 −0
Open

[2주차] virtualDOM #150

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions react/virtualDOM.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
## 결론

<br>

virtualDOM은 가상화된 DOM이자 UI의 변화를 관리하는 기능이다.
Copy link
Copy Markdown

@zereight zereight Nov 2, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

vdom의 장점이 포함된 결론이었으면 좋겠어요! 그게 vdom의 정체성이라고 생각합니다!

Copy link
Copy Markdown
Collaborator Author

@Tanney-102 Tanney-102 Nov 3, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저는 개인적으로 UI의 변화를 관리하는 기능의 vdom의 정체성이자 장점이라고 생각하는데 제주감귤님은 어떻게 생각하시나요?


<br>

## 설명

<br>

### 1. virtualDOM은 가상화 된 DOM이다.
- DOM은 엘리면트로 구성된 트리이다. 따라서 virtualDOM은 가상화된 엘리먼트로 구성된 트리이다.
- 이는 virtualDOM을 구현하기 위해 먼저 가상 엘리먼트가 정의되어야하고 이 엘리먼트가 어떤 방식에 의해 만들어지는지 정의되어야 한다.(createElement)
### 2. virtaulDOM을 실제 DOM에 반영하기 위해 렌더러가 구현되어야한다.
### 3. virtualDOM의 동작
- 사용자는 가상화 된 엘리먼트 트리(virtualDOM)을 만들어 렌더러에 전달한다.
- 최초 렌더시에는 virtualDOM의 내용을 실제 DOM으로 변환하여 그대로 반영한다.
- 이때, virtualDOM은 메모리에 저장된다.
- 기존에 저장되어 있는 virtualDOM이 있다면 렌더러는 새로운 virtualDOM과 기존의 virtualDOM을 비교하여 변경된 부분만을 실제 DOM에 반영한다.
- 기존의 virtualDOM을 새로운 virtualDOM으로 대체한다.

<br>

## 요약

<br>

- virtualDOM은 가상화된 DOM이다.
- virtualDOM은 비교를 통해 변화를 DOM에 반영한다.
- virtualDOM의 사용자는 상태에 따른 UI의 모습(가상화된 엘리먼트)을 렌더러에 전달하는 일만 한다.

<br>

## 추가

<br>

- virtualDOM과 유사한 IncrementalDOM도 있다.
- incrementalDOM은 가상화된 돔이 아닌 실제 돔을 이용해 UI 변경점을 찾는 방식이다.