가상 DOM이란?
📌 V-DOM 은 프로그래밍 컨셉이다.
메모리 상에 UI 관련 정보를 띄우고, react-dom 과 같은 라이브러리에 의해 실제 DOM과 sync 를 맞춘다. 이 과정이 재조정(reconciliation)
-
웹 페이지가 표시해야 할 DOM을 일단 메모리에 저장하고 리액트가 실제 변경에 대한 준비가 완료 되었을 때 실제 브라우저의 DOM 에 반영한다.
-
리액트의 이 가상 DOM 은 무조건 이러한 방식이 일반 브라우저의 DOM 관리 방식보다 빠르다는 것은 아니다, 가상 DOM으로 웬만한 애플리케이션을 만들 수 있을 정도로 충분히 빠르다는 것이 리액트팀의 의견
-
기존 자바스크립트로 돔을 건들게 되면 가상 돔은 자바스크립트 객체이기 때문에 우리 돔보다는 빠르다 (바뀌는 부분에 한번에 반영하는것도 좋은 가성비라고 생각합니다.)
그런데 왜 이를 쓰는 것일까?🧐
그것은 실제 DOM 을 조작하고 이를 브라우저의 리플로우, 리페인팅 하는 작업이 비용과 시간이 더 많이 들기 때문에 그것을 리액트가 가상으로 해보는 것이다
리액트 파이버란?
- 가상 DOM과 렌더링 과정을 최적화를 가능하게 해주는 것이 바로 리액트 파이버 (React Fiber).
- 리액트팀에서 만든 기존 렌더링 스택의 비효율성을 해결하기 위해 만든 개념이다. 리액트 파이버의 목표는 웹 애플리케이션에서 발생하는 애니메이션, 레이아웃, 그리고 사용자 인터렉션에 올바른 결과물을 만드는 반응성 문제를 해결하기 위함이다
파이버가 하는 역할
- 작업 일시 중지 후 나중에 다시 시작
- 작업별 우선 순위 지정
- 이전에 완료된 작업 재사용 (많은 요소중에 안에 컨텐츠는 바뀌면 필요한 부분만 새로 그리는것이 재사용의 의미)
- 더이상 필요하지 않은 경우(우선순위를 말하는 것) 작업 중단
위 역할들의 모든 과정들이 비동기로 일어 난다는 것, 과거 리액트의 조정 알고리즘은 스택 알고리즘으로 되어있었지만 파이버 재조정자 즉 리액트에서 어떤 부분을 새롭게 렌더링 해야할지 가상 DOM과 실제 DOM 을 비교하는 작업(알고리즘) 으로 변경 되었다
파이버의 특징
1.컴포넌트가 최초 마운트 되는 시점에 생성되어 이후에는 가급적 재사용
2.단순한 자바스크립트 객체로 관리되고 있다.
리액트 파이버 트리
current tree( 현재의 모습을 담은 트리)
- DOM에 Mounted 된 파이버
workInProgress 트리 (작업 중인 상태를 나타내는 트리)
- reder phase 에서 작업 중인 파이버
- commit phase 를 지나면 current tree가 된다
workInProgress tree 는 current tree 에서 자기 복제하여 만들어짐 서로 alternate로 참조
파이버는 첫번째 자식만을 child 로 참조, 나머지 자식들은 서로 sibling 로 참조, 모든 자식은 부모를 return
1) 현재 UI 렌더링을 위해 존재하는 트리인 current 를 기준으로 모든 작업이 시작
2) 여기서 만약 업데이트가 발생하면 파이버는 리액트에서 새로 받은 데이터를 기준으로 workInProgress 트리를 빌드하기 시작
3) 리액트 파이버 작업이 끝나면 리액트는 단순히 포인터만 변경해서 workInProgress 트리를 현재 트리로 바꿈
=> 이러한 기술을 쓰는 것은 미쳐 다 그리지 못한 모습을 노출시키지 않기위해(불완전한 트리를 보여주지 않기 위해) 더블 버퍼링 기법을 쓰는 것이다.
정리
가상 DOM 과 리액트의 핵심은 브라저의 DOM 을 더욱 빠르게 그리고 반영하는 것이 아니라 값으로 UI 를 표현하는 것이다. 화면에 표시되는 UI를 자바스크립트 문자열, 배열 등과 마찬가지로 값으로 관리하고 이러한 흐름을 효율적으로 관리하기 위한 메커니즘이 바로 리액트의 핵심이다!
