TIL React와 Vue, Angular의 차이점

Front-end 프레임워크

1. 프레임워크란? 

• 애플리케이션 구조에 대한 가이드라인과 기반 코드를 제공하는 개발 툴

2. Front-end 프레임워크

• 사용자와 만나는 화면단인 Front-end 개발을 목적으로 하는 프레임워크
• 최근에는 웹이 복잡해지며  SPA 개발을 위한 프레임워크가 각광 받고 있다.

JavaScript 프레임워크의 등장

• 모바일 / 웹의 발달로 화면에서 표현해야 하는 Front-end의 개발이 복잡해지며 JS를 이용한 프론트엔드 구성이 주목 받고 있다.
• 웹 규모가 커지며 JS 파일이 많아져 관리가 어려워졌고, 이를 관리하는 프론트엔드 프레임워크가 등장

 

React / Angular / Vue.js 비교

• 가장 먼저 발표된 프레임 워크는 Angular. 이후 React, Vue.js 순서로 개발
• React는 프레임워크가 아닌 라이브러리. MVC 모델 중 View 단에만 영향
• Angular / Vue.js는 프레임워크
• 주요 특징은 React는 Virtual DOM을 사용하고 Angular는 양방향 바인딩 사용. Vue.js는 React와 Angular의 장점을 수용한 것이 특징

React

• Facebook에서 만든 자바스크립트 기반 UI 라이브러리
• 넷플릭스 / 트위치 등 글로벌 기업들이 사용
• 버추얼 돔을 사용함
• XML을 변형한 JSX 문법 권장
• Virtual DOM 사용으로 일반 DOM 객체를 사용할 때 보다 빠름
• 컴포넌트를 재사용 할 수 있어 생산성이 높고 유지보수에 유리
• 라이브러리기 때문에 다른 프레임워크와 혼용 가능
• JSX 문법은 익숙하지 않으면 적응 어려움
• IE 8 이하의 브라우저는 지원하지 않음

 

Angular

• 구글에서 개발하고 운용 중인 자바스크립트 기반 Front-end 웹 프레임워크
• 양방향 바인딩 방식 제공
• AngularJS는 자바스크립트 기반으로 출시되었으나 2014년 발표된 Angular는 타입스크립트 기반
• 전통적인 프레임워크로 프로젝트의 생성 / 테스트 / 빌드 / 배포 모든 단계를 위한 기능을 제공
• 대규모 프로젝트에 적합한 타입스크립트 언어를 Vue.js / React보다 효과적으로 지원함.
• 컴포넌트를 재사용함.
• 학습 난이도가 높다.
• 사용법이 정형화되어 있어 다른 라이브러리와의 혼용이 어려울 수 있다.

양방향 바인딩

• 데이터바인딩은 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 것
• 단방향 데이터는 화면 생성 시 watcher(감시자)가 데이터를 인식해 화면에 출력한다. 이후 사용자가 새롭게 데이터를 업데이트하게 되면 임의의 이벤트를 발생시켜 데이터의 값을 업데이트 함.
• 양방향 바인딩의 경우, 추가적인 watcher가 존재한다. 사용자가 값을 입력해 변화가 생기게 되면 watcher가 변화를 감지하고 새로운 값을 브라우저 데이터에 반영한다.

 

Vue.js

• 웹페이지 화면 개발을 위한 프레임워크
• Angular의 양방향 바인딩, React의 Virtual DOM 랜더린 방식 모두를 가지고 있다.
• 템플릿을 사용해 뷰와 모델을 연결
• 낮은 학습 난이도가 장점
• 속도가 빠르고 가볍고 개발환경 구성이 쉬움 (CDN 링크 삽입만으로 이용할 수 있다.)
• 단점은 후발주자이기에 Angular / React에 비해 생태계 규모가 작다. 

 

React vs Angular vs Vue 비교

	React	Angular	Vue
구조	라이브러리	프레임워크	프레임워크
커뮤니티 활성화	1	2	3
러닝커브	중간	높음	낮음
생산	페이스북	구글	개인(Evan You 프로젝트 리더)
Release	2013	2010	2014
DOM	Virtual DOM	Real DOM	Virtual DOM
데이터바인딩	단방향	단방향, 양방향	단방향, 양방향
html 스크립팅 방식	JSX	Template	Template
사용자	Facebook, Netflix, Uber, Heroku, Paypal, Atlassian, Airbnb, Microsoft	Google, Youtube, Aws, Telegram, Paypal, Upwork, Nike	Nasa, Adobe, Nintendo, GitLab, Facebook, Netflix, Alibaba
선정기준	빠른 일정안에 기업용 솔루션 수준의 애플리케이션을 개발할때 사용.	기능이 풍부하고 규모가 큰 애플리케이션 개발 시 사용. 확장가능한 프래임워크가 필요 시 사용.	시장 진입단계에서 작고 가벼운 애플리케이션 개발 시 사용.
장점	유연성이 높고 가볍다 러닝커브가 높지 않아 자바스크립트 사용해본사람은 금방 사용가능. 가상돔으로 변경된 부분만 렌더링 되기 때문에 가볍고 빠르게 렌더링이 가능. 한 방향으로만 데이터가 바인딩 되기 때문에 안정적이고 디버깅이 쉽다.	프레임워크라 유지보수성이 높고 많은 기능들이 내제되어있어 생산성이 좋다. 양방향 데이터 바인딩으로 생산성을 높임.	Angular와 React의 장점(생산성 증가, 가상돔 사용)을 모아서 작업이 되었음. 문법이 단순하고 간결하여 러닝커브가 낮고 접근성이 높음.
단점	자유도가 높아 지원 라이브러리를 선정하거나 배우는데 리소스가 소모 될 수 있다. (JSX, Redux, Babel, Webpack, React Router) 높은 자유로도 인해 엔지니어의 코드 형식이 다를수 있어서 형식맞추는 과정에서 리소스가 많이 소모 될 수 있음.	비교적 번들 사이즈가 높아 초기 로딩속도가 느리다. 러닝커브가 높다. 해당 기술을 가진 사람 찾기가 비교적 어려움. 양방향 데이터 바인딩으로 성능이슈 발생할수있음.	단순성과 유연성이 좋다보니 안 좋은 코드들로 인해 디버깅이 힘들어질 수 있다. 기업지원이 없음. 커뮤니티가 적음. 기업용 솔루션으로는 적합하지 않음.