React / Vue / Angular 기술별 차이점과 장단점

세 가지 모두 MIT 라이선스를 채택하고 있다. (MIT 라이선스는 독점 소프트웨어에서도 재사용에 대한 제한이 없다.)

Angular

강력한 명령행 도구와 잘 정돈된 폴더 구조, 프로젝트 생성과 동시에 각종 환경이 한 번에 갖춰지는 등 필요한 기능을 모두 내장한 프레임워크

• 타입스크립트를 주력언어로 채택하여 정적 타입을 제공
  • 타입 체크, 리팩토링을 지원, 객체지향적 프로그래밍에 적합
• Angular CLI : 프레임워크에 익숙하지 않은 초심자들이 개발환경 구축을 Angular CLI가 제공하는 명령 하나만으로 간단히 해결할 수 있음.
• 컴포넌트 기반 개발
• 개발에 필요한 모듈을 기본으로 제공
• 실제 DOM 위에서 동작함에도 변경감지 구현 기능이 따로 존재하여 성능을 높임
• 단방향 데이터 바인딩과 양방향 데이터 바인딩 모두 지원
• 대규모 프로젝트 개발에 효과적

 

React

사용자의 조작에 따라 사용자 인터페이스가 동적으로 변화하는 웹 애플리케이션을 개발할 수 있게 해 주는 프론트엔드 라이브러리

• 개발에 필요한 모듈을 기본으로 제공하지 않고, 서드파티(Third party) 라이브러리에 의존
  • 서드파티 : 프로그래밍을 도와주는 plug_in 이나 library 등을 만드는 회사
• 컴포넌트 기반의 개발
• 초심자의 빠른 개발환경 구축을 위해서 Create React App 툴 제공
• 자바스크립트에 집중된 컴포넌트 권장 (JSX기술 = XML 포맷의 템플릿을 직접 자바스크립트에 내장시키는 형태)
• 가상 DOM 이용
  • 전통적인 DOM은 한 요소에서 변경이 발생해도 전체 트리구조를 업데이트할 수 있음. 즉 렌더링 성능이 떨어질 수 있음
  • 가상 DOM은 가상 DOM 내의 변경사항을 추적하여 전체 트리의 다른 부분에 영향을 주지 않고, 매핑된 실제 DOM상의 특정요소만 업데이트할 수 있게 도와줌
• SPA(Single Page Application) 방식으로 진행한다면 검색엔진 노출(SEO : Search Engine Optimization)에 관련된 문제를 생각 했을 때 SSR을 염두해 둘 수 밖에 없었는데 Next.js를 사용하여 해결 할 수 있다.

react정리 : https://brash-wanderer-5cd.notion.site/React-b0d10d03b4d84cf2991e988edd05a3d3

CSR, SSR 정리 : https://brash-wanderer-5cd.notion.site/CSR-SSR-62307cc44a004db9adbcda252ed7c97b

 

vue.js

• 컴포넌트 기반의 개발(JSX를 권장하는 react와 달리 Angular처럼 HTML 마크업 기반의 템플릿 문법을 사용)
  • 컴포넌트를 작성 할 때 단일 파일 컴포넌트'라는 .vue 확장자를 가지는 파일을 사용한다. 이 파일은 HTML 마크업 기반의 템플릿 부분과 자바스크립트 부분 그리고 CSS를 작성하는 스타일 시트 부분으로 나뉜다.
• 가상 DOM 이용
• 단방향 데이터 바인딩과 양방향 데이터 바인딩 모두 지원
• CLI 툴을 제공(가이드 문서를 통해 특정모듈을 권장), react만큼 방임하지 않고 angular처럼 정해진 것도 아님.
• 초심자에게 접근성이 뛰어남.(공식 문서에 예제와 번역이 잘 되어있음)
• SSR (Server Side Rendering)

 

 

 

학습난이도

Angular

Angular는 이 셋중 가장 난이도가 높으며 따라서 배우는 데는 시간이 걸린다.

하지만 angular에 시간 투자는 프론트엔드 전체의 동작방식을 이해하는 측면에서 개발자에게 도움이 되기도 한다.

React

React는 약 1시간만에 사용환경을 설정할 수 있는 Getting Started 가이드를 제공합니다. 문서는 철저하고 완벽하며, 일반적인 문제에 대한 해답은 StackOverflow에 등록되어 있습니다 완전한 프레임워크는 아니기 때문에 다른 라이브러리를 사용해야한다.

Vue.js는 Angular나 React보다 배우기가 더 쉽다.그러나 Vue.js의 단순성과 유연성은 양날의 검이다. 디버깅 및 테스트가 어려워질 수도 있기 때문.

 

선택기준

프로젝트의 규모가 크고 타입스크립트를 좋아한다면 Angular,

거대한 생태계와 유연성을 원한다면 React,

쉽고 가벼운 프레임워크를 원한다면 Vue.js

 

 

---

[참고]

https://www.samsungsds.com/kr/insights/frameworks.html