[TIL] React - Virtual DOM

👩‍💻 이 포스팅에서는 Virtual DOM에 대해 정리하였습니다.

Virtual DOM?

📝 실제 DOM 변화를 최소화 시켜주는 역할을 한다.

브라우저는 HTML파일을 보여주기위해
브라우저 렌더링 과정 DOM 트리 생성 → CSSOM 트리 생성 -> 렌더 트리 생성 → Layout → Paint 과정을 거친다.
화면에 변화가 생길 때마다 매번 이 과정을 거치는 것은 비효율적이다.

✨ Virtual DOM은 뷰의 변화를 Virtual DOM에 적용시키고 최종 결과만 실제 DOM에 전달한다.
따라서 10개의 변화가 있다면
1. Virtual DOM은 변화된 부분만 가려내어
2. 실제 DOM에 전달하고
3. 실제 DOM은 그 변화를 1회로 인식하여
4. 단 한번의 렌더링 과정만 거치게 된다.

DOM이 직접 변경된다면 사소한 변경사항에도 전체가 렌더링되기 때문에 브라우저에 과부하가 올 수 있다.
최대한 DOM에 직접 접근하지 말아야 한다.

정리

즉! React는 실제 DOM을 매번 조작하는 비효율적 방법 대신에, Virtual DOM이라는 가상의 돔을 유지하면서 필요한 부분을 미리 계산하여 실제 DOM에는 한번의 변화를 가하는 식으로 최적화를 구현한다.