React.js / Vue.js / Angular 세가지 프론트엔드 프레임워크의 Dom 제어방식 차이점

참고: 08liter CTO Jeff님의 강의 + 

https://poiemaweb.com/angular-component-data-binding

Angular Component - Data Binding | PoiemaWeb

 

들어가기전에, React.js 와 Vue.js 그리고 Angular의 내부적인 동작은 구체적으로 많이 다를것이라고 생각한다.

하지만 뭉뚱그려서 대략적으로 위 세가지 프론트엔드 프레임워크가

어떻게 브라우저의 Dom을 조작하는지 간략하게나마 정리해보고싶어서 이 글을 작성한다.

따라서 읽으시는 분들은 이 글이 아주 확실한 정답이 아닌 나 자신만의 생각의 정리이므로 

틀린 부분이 있을 수 있다는 것을 염두해 주셨으면 좋겠다.

 

 

React.js 

React 코드에서 Virtual Dom을 구성하기위해 어떠한 연산을 처리하면

연산 처리 후 React 코드의 하위에 존재하는 React Native 객체에서 Virtual Dom을 생성하고

Virtual Dom의 구조. 즉, React.js Dom tree의 구성에 맞게 브라우저에서 Dom tree를 구성할 수 있도록

브라우저에 전달한다.

그 후 클라이언트에서 어떠한 이벤트 발생(클릭, 입력 등)으로 인한 Dom 변경은

React 코드에서 다시 해당 부분의 Model을 재 연산하여

위와 동일한 프로세스로 동작한다.

(React코드 연산 -> React Native객체에서 Virtual Dom 생성 -> 변경된 Dom정보 브라우저에게 전달 -> 브라우저는 전달받은 부분의 Dom만 Dom tree에서 재 렌더링)

 

Vue.js 

React.js와 마찬가지로 Virtual Dom을 사용하여 Dom이 바뀌는 부분을 연산하여

렌더링할 Dom만 브라우저에게 전달한다.

그럼 그 Dom을 브라우저는 Dom tree의 해당되는 Dom만 재렌더링 한다.

 

Angular

Angular는 React.js와 Vue.js와는 다르게 Virtual Dom을 사용하지 않고 직접 브라우저의 Dom tree를 조작한다.

따라서 해당 Dom tree의 Dom들 안에서 렌더링을 직접 한다.

 

--

React.js와 vue.js 그리고 Angular에 대해서 

양뱡항이다, 단방향이다 이러한 구분이 많은데

이는 딱히 별 의미가 없는 것 같다.

어차피 세개의 프레임워크 동일하게 

브라우저 위에서 Dom을 조작하기 간편하고 빠르게 하기 위해 탄생한 프레임워크이기 때문에

또한 model을 처리하는 방식에 엄청나게 큰 차이가 없기 때문이다.

굳이 차이점을 말해보자면

React.js와 vue.js는 Virtual Dom을 사용하고 있고

Angular는 직접 브라우저의 Dom tree를 조작하고 있다는 것..?

--