CRP게시글을 읽은 후 읽어주시길 바랍니다.
앞선 게시글을 통해 DOM트리에 대해 자세히 알아보았습니다.
간략하게만 재설명 하자면 DOM트리란 HTML코드를 오브젝트화한것으로 CSS파싱, 렌더트리 구성 과정을 거쳐 최종적으로 생긴 결과물이었습니다.
React이전의 기존 웹프로젝트를 떠올려봅시다. 10년전 네이버 홈페이지를 들어가면, 어떤 버튼을 클릭했을때 흰창으로 넘어간다음 위에서부터 아래로 렌더링이 됐죠.
뉴스에 댓글만 달아도 전체 페이지가 다시 렌더링이 되었습니다. 이경우 Jquery나 자바스크립트의 elementgetById같은 메소드를 활용해서 직접 DOM을 조작해준 사례입니다.
DOM이 수정되면 CRP과정에 따라 모든 웹페이지가 렌더링되었던 것이죠. 화면에서 100번의 수정사항이 발생하면? 렌더트리가 100번 구성되었습니다. 일부분만 바뀌어도 전체 페이지를 렌더링하니 부하가 클 수 밖에 없었죠.
요즘은 어떨까요? 댓글 달기를 눌러도 새로고침되지 않고 댓글만 추가되죠? 인스타그램이나, 페이스북 처럼요.
이는 가상 돔 기술이 얻을 수 있는 최대 장점중 하나입니다. 가상 돔이라는 개념을 차용해 한번만 DOM수정이 이루어지도록 하는 것이죠.
대표적으로 리액트, 뷰, 앵귤러가 해당 기술을 차용하고 있는데 다음 사진을 보면 보다 쉽게 이해하실 겁니다.
리액트, 앵귤러, 뷰는 위 그림처럼 가상 돔을 미리 생성해둡니다.
가상돔 수정 작업 이후에, 실제 DOM과 차이점을 비교합니다. 위 사진을 보면 Hello에서 NewHello만 변경이 되었으니, 실제 돔에서 필요한 부분만 콕 집어 업데이트 할 수 있다는 거죠.