Virtual Dom
요약 : 여러번 렌더링할것을 한번에 렌더링한다.
- SPA로 인해 DOM 복잡도가 증가하고 최적화, 유지보수가 어려워졌다.
- DOM을 반복 조작할수록 렌더링횟수가 늘어나고, PC 리소스 소모가 많아진다.
- => DOM 조작횟수를 줄여보자!
이러한 문제점의 해결방안으로 Virtual DOM 이 등장하였다.
Virtual Dom의 작동방식을 소개하기에 앞서 브라우저에서의 렌더링 순서를 간략하게 살펴보자.
브라우저의 렌더링 순서
1. HTML을 파싱하여 DOM 트리가 생성되고, CSS를 파싱하여 스타일 규칙이 생성된다.
2. 새로운 렌더트리가 생성된다.
3. 레이아웃과정을 거친다. 레이아웃 과정에서는 각 노드들이 위치해야할 화면의 좌표가 주어진다.
4. 그리기(Painting) : 트리의 각 노드들을 거쳐가면서 paint()메소들을 호출한다. 그렇게 화면에 홈페이지가 나타난다.
기존 DOM을 이용한 렌더링의 비효율성
- DOM에 변화가 생기면 모든 요소들의 스타일(CSS)을 다시 계산하여 렌더트리를 재생성하고, 레이아웃을 만들고 페인팅을 한다. . 위 과정이 DOM을 조작할때마다 반복된다.
- 복잡한 어플리케이션에서는 DOM 조작이 많이 발생한다. 그만큼 브라우저는 연산을 하고 이는 전체적인 프로세스를 비효율적으로 만든다.
Virtual Dom
Virtual DOM은 메모리에 만들어 놓은 가상객체인데 DOM을 추상화 하고 있다.
만약 뷰에 변경이 생긴다면 그 변경내역들은 실제 DOM에 적용되기 전에 Virtual DOM에 모인다.
그 후 최종 변경내역들을 실제 DOM에 적용한다.
즉, 하나하나 실제 DOM에 적용하는 것이 아니라, Virtual Dom에 모았다가 실제Dom에게 던져주면 실제 렌더링은 딱 한번만 하게 된다.
그려면 레이아웃 계산과 리렌더링의 규모는 커지겠지만, 딱 한번만 하게 된다. 이렇게 하나로 묶어서 적용시키면 연산의 횟수를 줄일 수 있다.
정리하면 Virtual DOM은 DOM 변경내역들을 한번에 모아서 한번에 처리하고, 렌더링도 딱 한번만 하게 해주는 자동화 장치이다.
참고자료
https://d2.naver.com/helloworld/59361
https://jeong-pro.tistory.com/210
'개발 > React' 카테고리의 다른 글
| 리액트에서 카카오 맵 api 사용하는 법 (0) | 2021.11.19 |
|---|---|
| Code Splitting - dynamic import, React.lazy(), Suspense (0) | 2021.11.05 |
| 컴포넌트 최적화 : React.memo(), useSelector(callback,equalityFn) (0) | 2021.10.17 |
| 번역)Presentational and Container Components (0) | 2021.09.27 |
| Styled-Component에 hover 간단하게 넣는 법 (0) | 2021.09.14 |
