증가형 돔에 대해서 들어보셨나요?

jjyung·2022년 1월 9일
0

글을 적게 된 이유

최근에 가상돔에 대해 열심히 공부하다가 '증가형 돔'에 대해서 들어본 적이 있냐는 질문을 들었다. 태어나서 처음듣는 단어에 호기심도 생겨 찾아보다보니 공유하고싶어 글을 적게되었다. 물론 리액트의 개념은 아니지만 구글 개발팀에서 증가형 돔을 선택했다고하니 그 이유가 궁금해졌다 (호기심 무한굴레...)

증가형 돔 vs 가상형 돔

증가형 돔(Incremental DOM)은 Angular에서 채택한 아이디어다. 가상돔은 기존 돔 트리와 비교한 후 변경된 부분을 리얼 돔에 적용한다. 가상돔의 장점은 어떤 언어라도 사용이 가능해 따로 컴파일을 할 필요가 없다는 점이고 컴포넌트의 렌더링 결과를 값으로 (JSX)받을 수 있다는 점이다.

그렇다면 증가형 돔은 무엇인가? 가상형 돔과 달리 일련의 명령으로 이루어져 컴포넌트를 해석하지않고 명령이 가리키는 컴포넌트를 사용한다. 즉, 명령이 어떤 컴포넌트를 가리키지 않으면 그 컴포넌트는 트리 쉐이킹이 되어 번들에서 제외된다.

또한, 증가형 돔은 요소가 추가/제거될때만 메모리가 할당되고, 그 메모리양은 바뀌는 돔의 크기만큼만 바뀌게 된다. 즉, 메모리를 상당히 절약할 수 있다는 것이다.

구글에서는 증가형 돔을 선택한 이유는 어플리케이션이 모바일기기에서도 잘 작동할 수 있도록 즉 번들 용량과 메모리 점유율이 중요했기때문에 증가형 돔을 선택했다.

결론

공부에 끝이 없음을 깨달았다. 가상형 돔에 대해서도 끝없이 공부할 수 있는 것이 많은데 증가형 돔이라니! 그것도 구글이 채택했다니! 상당히 흥미로웠고 다음에 기회가 있다면 이 증가형 돔에 대해 더 자세히 알아보고싶다.

Word Cited

profile
🏃‍♀️movin' forward, developer

0개의 댓글