virtual dom과 관련된 인식 피드백

시나브로 자바스크립트

01. DOM API 의 기본 - (4 of 6) innerHTML and its inefficiency

작성

수정됨

안녕하세요.

강의 내용이 좋아서 재밌게 잘 보고 있습니다.

피상적으로 virtual dom을 접했을때는 virtual dom과 dom을 비교하는 글들위주로 보다보니 dom은 전체를 렌더링해서 느리고 virtual dom은 일부만 조작해서 성능이 향상된다는 인식이 있었는데요.

강의를 듣다보니 virtual dom의 기능이 이런 방향과 다른결이라고 느꼈습니다.

강의에서 이해한 내용과 찾아본 지식을 종합해서 virtual dom에 대한 나름대로의 정리를 해보았는데요.

제대로 인식한 것이 맞는지 피드백이 가능할까요?

dom의 렌더링과 virtual dom의 렌더링은 서로 다른 시점이고 다른 책임을 가지고 있다.
virtual dom은 dom렌더링을 낚아채서 빠르게 최적화하는게 아니고 dom렌더링은 브라우저가 항상 진행하는것이다.
virtual dom은 빠른호출이 아니라 개발편의성 관점으로 보아야한다.
전체 트리에서 변경된부분을 찾기 때문에 하드코딩된 것과 비교해 호출속도에 있어서 오히려 오버헤드가 있을수있다.
기존의 상태가 변경될때, 필요한 요소를 일일히 찾아서 innerHTML로 업데이트하는 과정을 virtual dom을 통해 추상화하여 제공하는것이다.
필요한부분만 업데이트하는것이 중요한것은 17.1 innerHTML and its inefficiency에서 말씀하신대로 상태유실가능성 방지를 위한것이다.

답변 1

지식공유자

안녕하세요.

Virtual DOM 에 대해서 아주 간략히 말씀을 드려보자면,

const elem = document.querySelector('....');

if (elem.classList.contains(...) {
  elem.classList.add(....)
}

이런 식으로 매번 element 에 직접 접근해서 업데이트를 하는 대신에

현재 페이지의 모든 elements 의 hierarchy 와 상태를 구조 그대로 메모리에 변수에 들고 있고,

업데이트 해야 할 때 그 변수들의 값을 확인해보고 실제로 어떤 element 을 찾아서 어떤 값을 업데이트 할 지 판단하는데 이용되는 하나의 레이어라고 보시면 됩니다.

잠깐 찾아보았는데, 이 두 영상이 VDOM 에 대해 적절하게 설명해주고 있는 것 같은데 도움이 되길 바랍니다!

질문자

답변 감사합니다.

답변해주신 내용에 따르면 제가 전반적인 맥락을 잘 따라오고 있는 것 같습니다.

그리고 참조해주신 영상을 보니, 속도 관점에서는, 실제 virtual dom이 dom조작해야할 리스트를 배치처리함으로써 dom이 업데이트해야할 '요소'를 최소화 하는것이 아니라, 'dom 렌더링 횟수'를 최소화 함으로써 속도를 높이는것이었네요.

참조해주신 영상이 구체적이면서도 시각적으로도 이해하기 쉬워서 그 외 다른 맥락을 이해하는데 많이 도움이 되었습니다.

인프런 커뮤니티 질문&답변