virtual DOM 파헤치기

Virtual DOM

복잡한 SPA(싱글 페이지 어플리케이션) 에서는 DOM 조작이 많이 발생한다. 그 변화를 적용하기 위해 브라우저가 많이 연산을 해야한단 소리고, 전체적인 프로세스를 비효율적으로 만든다는 뜻이다. 

이 이부분에서 Virtual DOM 이 빛을 발한다! 만약에 뷰에 변화가 있다면, 그 변화는 실제 DOM 에 적용되기전에 가상의 DOM 에 먼저 적용시키고 그 최종적인 결과를 실제 DOM 으로 전달해준다. 이로써, 브라우저 내에서 발생하는 연산의 양을 줄이면서 성능이 개선되는 것 이다.

Virtual DOM 이 해결 하려고 하는건 무엇이냐? DOM fragment를 관리하는 과정을 수동으로 작업 할 필요 없이, 자동화하고 추상화하는것이다. 그 뿐만 아니라, 만약에 작업을 직접 한다면, 기존 값 중 어떤게 바뀌었고 어떤게 바뀌지 않았는지 계속 파악하고 있어야하는데 (그렇지 않으면 수정 할 필요가 없는 DOM 트리도 업데이트를 하게 될 수도 있으니까), 이것도 Virtual DOM 이 이걸 자동으로 해준다. 어떤게 바뀌었는지 , 어떤게 바뀌지 않았는지 알아내준다.

마지막으로, DOM 관리를 Virtual DOM 이 하도록 함으로써, 컴포넌트가 DOM 조작 요청을 할 때 다른 컴포넌트들과 상호작용을 하지 않아도 되고, 특정 DOM 을 조작할 것 이라던지, 이미 조작했다던지에 대한 정보를 공유 할 필요가 없다. 즉, 각 변화들의 동기화 작업을 거치지 않으면서도 모든 작업을 하나로 묶어줄 수 있다는 뜻이다.