[JS] 자바스크립트 라이브러리와 프레임워크 비교 - React, Vue, Angular

저는 현재 인턴으로 근무하고 있는 스타트업에서 React, React Native, TypeScript를 공부하며 암호화폐 지갑 앱을 개발하고 있습니다. React를 공부하던 중 주요 JavaScript 라이브러리와 프레임워크로 자리 잡은 Angular, React, Vue.js 의 차이가 궁금해졌고, 이 글에서 React 와 Angular, React와 Vue.js 를 각각 비교해 보고자 합니다.

" JavaScript Framework가 정말 많은 요즘, 어떤 Framework를 써야 할까? "

프레임워크 특성을 살려 진행하려는 프로젝트의 목적에 가장 부합하는 프레임워크

---

React vs Angular

먼저, Google에서 만든 Angular는 프레임워크(Framework)이고, Facebook에서 만든 React는 UI 구성요소 라이브러리라고 할 수 있습니다. React는 자체적으로 개발에 필요한 모든 요소들을 제공하지 않으며, 제대로 활용하기 위해선 추가적인 구성이 필요하기 때문에 엄격히 말해 프레임워크라고 표현하지 않습니다.

• Data Flow

Angaular가 처음 발표되었을 때 가장 강력한 기능 중에 하나가 양방향 데이터 바인딩(상위 컴포넌트에서 하위 컴포넌트로 혹은 하위 컴포넌트에서 상위 컴포넌트로)이었습니다. 이는 코드를 짜기에도 편하고 이해하기 쉽지만, 애플리케이션의 크기가 커지면서 데이터 바인딩을 위한 흐름이 난잡해지고 복잡도가 상승하는 문제가 발생합니다.

반면, React는 양방향 바인딩에서 오는 복잡도 증가를 해결하기 위해 상위 컴포넌트에서 하위 컴포넌트로만 데이터가 흐릅니다. 

그렇다면, React에서 하위 컴포넌트에서 상위 컴포넌트의 데이터를 변경하려면 어떻게 해야 할까 ?

상위 컴포넌트의 데이터를 변경하는 메소드를 하위 컴포넌트에 Props로 넘겨주면 된다.

• Component

Angular는 템플릿 작성을 위한 표준 HTML을 보장하고, 이를 확장하는 방식으로 모델과 뷰, 그리고 DOM 객체를 컴포넌트화 합니다. 또한, 템플릿에 대한 캡슐화를 통해 이식성과 재사용성을 극대화 하여, 마크업(Markup) 개발자와 자연스러운 협업이 가능합니다.

반면, React는 JSX를 이용해 템플릿과 자바스크립트가 연결되어 구조와 기능이 하나로 묶여 동작하기 때문에 템플릿 자체를 디버깅할 수 있는 장점은 있지만, JSX를 알지 못하는 마크업 개발자와는 협업에 어려움이 따릅니다.

• Rendering

Angular 의 렌더링에서는 브라우저의 스레드(UI 영역)와 서비스 작업자 스레드(Worker 영역)를 모두 사용합니다. Worker 영역에서 directives, services, filters 및 bootstraps 을 구축하고 컴파일하며, UI영역에서 DOM 렌더링을 합니다.

반면, React는 Virtual DOM 이라는 개념을 도입하여 Virtual DOM 에 DOM Tree 와 같은 구조를 갖고 있고 변경이 생기면 구조체를 비교(Diff)하여 최소한의 변경 상태만 DOM에 적용하고, render()를 통해 그 부분만 렌더링합니다.

• TypeScript 지원

React와 Angular 모두 TypeScript 를 지원합니다.

React vs Vue.js

• Data Flow

Vue.js 또한 React 와는 다르게 v-model 을 통해서 양방향 데이터 바인딩 을 지원합니다.

• Component

Vue.js 도 Angular 처럼 템플릿 작성을 위한 표준 HTML을 보장하고, 이를 확장하는 방식으로 모델과 뷰, 그리고 DOM 객체를 컴포넌트화 합니다. 또한, 템플릿에 대한 캡슐화를 통해 이식성과 재사용성을 극대화 하여, 마크업(Markup) 개발자와 자연스러운 협업이 가능합니다. 그리고 render()도 가능은 하지만, Vue의 정신과 반대된다며 안쓰는 것이 좋다고 합니다.

• Rendering

Vue.js는 React 와 같이 Virtual DOM 이라는 개념을 도입하였습니다.

• TypeScript 지원

React와 Vue.js 모두 TypeScript 를 지원합니다.

결론

러닝커브가 가장 낮은 건 Vue.js 인 것 같고, 그 점을 빼면 React 가 가장 끌리는 듯.

참고

https://joshua1988.github.io/web-development/translation/why-we-moved-from-angular2-to-vuejs/

https://joshua1988.github.io/web_dev/vue-or-react/

http://www.incodom.kr/Angular_vs_React

http://blog.jeonghwan.net/vue/2017/03/29/is-vue-better-than-angular-react.html