VanilaJS의 DOM조작

VanilaJS를 사용한다면 DOM을 직접 조작해서 HTML을 변경하는 방법을 사용한다.

단점 발생
1. Hard to manage: 개발자가 개발하기 어렵다. 일일히 매번 DOM을 선택해야함
2. Repetitive: DOM이 바뀔 때 마다 반복적인 Repaint를 진행한다.

위와 같은 단점을 해결하기 위해 jQuery가 등장하였는데

jQuery

공식 문서
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
-번역-
Query는 빠르고, 작으며, 다양한 기능을 갖춘 JavaScript 라이브러리입니다. HTML 문서 탐색과 조작, 이벤트 처리, 애니메이션, Ajax 작업을 훨씬 더 간단하게 만들어주는 사용하기 쉬운 API를 제공하며, 다양한 브라우저에서 작동합니다. 다재다능함과 확장성을 결합하여, jQuery는 수백만 명의 사람들이 JavaScript를 작성하는 방식을 변화시켰습니다.

제공하는 기능

• DOM 요소 선택
• DOM 요소 조회 및 수정
• CSS 조작
• 이벤트 처리
• 특수효과 및 애니메이션
• AJAX 지원 및 JSON/XML 파싱
• 여러 유틸리티 함수들

많은 기능을 제공하지만 vanilaJS의 단점들 중 1번(Hard to manage)만 해결하고 2번(Repetitive)은 해결하지 못했다.

그리고 생각보다 문법이 좋고 편해서 많이 사용했다고 한다.

React

VDOM(Virtual DOM)

위의 문제중 2번을 해결하기 위해 VDOM(Virtual DOM)을 도입했다.

예를 들어 버튼 클릭 한번에 DOM객체가 3번의 변경이 일어났다고 하면

• 1번의 변경 -> Repaint -> 1번의 변경 -> Repaint -> 1번의 변경 -> Repain

총 3번의 Repaint가 일어나게 된다.

VDOM 도입시

• 총 3번의 VDOM 변경 -> Batch

이후 Repaint 한번으로 DOM을 변경함으로써 렌더링엔진과 브라우저의 부담을 줄인다.

Diffing Algorithm

VDOM을 변경하려고 탐색하는 것은 O(n)의 시간 복잡도를 갖고, DOM을 바로 변경하는 것은 O(1)이므로 후자가 더 좋은 것이 아닌가?

하는 의문이 들어서 React가 VDOM을 바꾸는 알고리즘이 무엇인가 찾아보았다.

https://ko.legacy.reactjs.org/docs/reconciliation.html

재조정(Reconciliation)이라는 과정을 거쳐 VDOM을 변경하게 된다.

DOM Tree는 아래 사진과 같이 구성이 되어 있는데

출처:https://hhhyyeee.wordpress.com/2018/03/29/03-what-is-dom/

React의 Diffing algorithm은 예를 들어 body의 자식 노드인 <a>태그가 <div>로 바뀌었다면, 해당 노드에 속한 모든 노드를 다 파괴한 후, 이후 태그로 바꿔서 새로 tree를 생성한다.

만약 DOM element 타입이 같다면?

<div className="before" title="stuff" />

<div className="after" title="stuff" />

이런 경우에는 현재 DOM 노드 상에 className만 수정한다.
className뿐만 아니라, style이 바뀔 때도 바뀐 것만 수정한다.

시간 복잡도를 위해 key기능을 제공한다.

아래와 같이 자식 노드에 <li>Conneticut</li>가 추가되었다고 한다면 React는 기존의 두 자식 노드를 파괴하고 3개의 자식 노드를 새로 생성한다.

<ul>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

<ul>
  <li>Connecticut</li>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

이러한 문제를 해결하고 속도를 향상하기 위해 React는 key 속성을 지원한다.

<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

<ul>
  <li key="2014">Connecticut</li>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

2015와 2016은 기존에도 있던 거니까 2014만 추가해서 수정하면 되겠구나!를 React에게 알리는 것이다.

결론적으로, 최악의 시간 복잡도는 O(n)은 맞으나, 평균적으로 Repaint하는 것 보다는 빠르며, Developer의 역량에 따라 최악은 면할 수 있었다.

key값을 추가하지 않아도 Rendering은 똑같이 될 것이다. 하지만 이런 디테일을 알고 있다면 Rendering 시간을 유의미하게 줄일 수 있지 않을까 생각했다.

React 16이후에는 Fiber라는 아키텍쳐가 도입되어 Diffing Algorithm의 실행 순서를 조정하여 성능을 개선시킨다고 한다. 추후에 알아보도록 하겠다.

그래서 React 왜 쓰는데?

Vue나 Angular, Svelte에 대해서는 따로 언급하지 않았지만, 각자에 장점이 다 있는 프레임워크, 라이브러리들이다. 근데 왜 시장은 React를 원하고 있으며 개발자는 왜 React를 선택해야하는가

기업에서의 선택

• 채용 용이성: React가 현재 가장 많이 쓰이고 있다 -> 개발 인력이 많다 -> 싸다
• 기술 레퍼런스: 개발자를 뽑았을 때, 참고할 수 있는 자료가 많은가?

팀/개인의 선택

• 기술 레퍼런스 및 커뮤니티 사이즈: 사용자들이 많을수록 참고할 정보가 많다.

  내가 먼저 접한 오류는 지구 반대편의 개발자도 겪어본 일이다. Stack Overflow에 내용이 있을 것이다..

• Meta라는 대기업이 든든하게 받혀주어, 기술 개발이 멈추지 않으며 그에 따른 퀄리티가 높다.

---

출처:ASAC 7기 강의자료