React 란?
Facebook에서 주도하여 개발한 웹 어플리케이션의 UI를 효과적으로 구축하기 위해 사용하는 javascript 기반 라이브러리이다. 다른 라이브러리들과 함께 사용할 수 있어 효율적인 라이브러리라고 할 수 있다. React 자체는 framework라 부를 수 있는 기준인 라우팅, 상태관리 기본 제공을 충족하지 못하기에 라이브러리이지만 React의 생태계는 framework이다.
React의 특징
- 선언적 (Declarative)이다
리액트는 대화형 UI를 작성하기에 유리하다. 데이터가 변경되었을 때 효율적으로 렌더링을 수행할 수 있도록 한다. - 컴포넌트 기반 (Component-based)이다
캡슐화된 컴포넌트가 스스로 상태를 관리하고 복잡한 UI도 효과적으로 구성할 수 있다.
React의 장단점
장점
- React 공식 문서 가이드와 방대한 커뮤니티, 자료를 통해 쉽게 접하고 배울 수 있다.
- Controller, directive, template, model, view 처럼 로직을 분리하는 것이 아닌, Component 하나로 관리를 한다. (view 역할을 담당)
- 성능이 뛰어난 가비지 컬랙터, 메모리 관리 기능을 지원한다.
- UI 수정과 재사용성이 좋으며, 코드 가독성을 높일 수 있다.
- 다른 framework나 라이브러리와 병행해서 사용할 수 있다.
단점
- IE8 이하 버전은 지원하지 않는다.
- view 이외의 기능은 직접 구현하거나 라이브러리를 사용해서 구현해야 하기에 javascript 배경지식이 필수이다.
- 데이터 모델링, 라우팅, Ajax 등 기능 지원이 안된다.
- 로딩시간이 길다.
Vue, Angular
Vue
Vue는 React와 Vue로부터 기능들을 결합한 오픈소스 javascript 프레임워크이다. React와는 달리, Vue는 개발을 서포트하는 큰 회사는 없다. 이 프레임워크는 전 Google 직원인, Even You가 만들었고 그는 Vue의 상태 관리와 라우팅 기능을 포함하기 위해 코어 팀을 모았다. Angula처럼, 기능과 패키지가 비교적 적지만 Vue는 모든 요소를 포함한 프레임워크이다. 광범위한 문서와 syntax의 간단함 덕에, javascript와 HTML의 초심자를 포함한 프로그래머들이 이 프레임워크를 수월하게 익힐 수 있다.
Angular
Angular 8은 최신 버전이고 Google이 관리하고 클라이언트 사이드, 브라우저 기반의 javascript 프레임워크이다. 서버에 HTML페이지들을 재로딩하길 요구하기보단, Angular는 웹사이트가 바르고 효율적으로 렌더링 한다. 라우팅, 상태관리, 그리고 form 유효성과 같은 툴을 내재한 all-in-one 프레임워크이다. Angular는 javascript와 결합된 Typescript 기반으로 만들어졌다.
비교
1) Learning curve
- 난이도 하 : Vue. Vue가 대부분의 웹 개발자들이 쉽게 배울 수 있는 프레임워크이다. HTML과 javascript의 기본에 가장 가깝기 때문에, 가장 친숙하고 쉽다.
- 난이도 중 : React. React는 ES6 구문들과 최적화되어 있기 때문에, 막 개발을 시작한 사람들에게는 어려울 수 있다. 또한 javascript의 대체적인 프로젝트에서 잘 쓰이지 않는, HTML과 javascript가 혼합된 구문인 JSX때문에 코드를 이해하는데 혼란이 올 수 있다.
- 난이도 상 : Angular. Angular는 Typescript를 사용하기 때문에, 배우기 어렵다. 컴포넌트, 모듈 그리고 구문들은 javascript와 꽤 많이 다르다.
2) Single-page apps (SPAs, 단일 페이지 앱)
Single-page Apps (SPAs)는 페이지 재로드 대기 시간이 거의 없을 정도로 반응적이고 모바일 웹 같다. 페이지는 브라우저에서 javascript가 유저가 보는 모든 것들을 컨트롤하기 때문에 단일 HTML 파일이다. 버튼이 클릭되거나 새로운 윈도우 페이지에 나타날 때, 서버로 어떠한 요청도 하지 않는다. 대신, javascript 코드는 바로 수정하고 렌더링 한다. SPA는 매우 빠르게 로딩하기 때문에 인기가 높다.
Angular는 SPA를 만들기 위해 구글이 만들었다. Typescript와 Angular의 내장된 툴들 그리고 서비스들은 SPA를 만드는데 최적화되어 있다.
👉 Single-page app : Angular
3) Multi-page apps (MPAs, 멀티 페이지 앱)
Multi-page apllication (MPA)는 e-commerce 또는 미디어 사이트 같은 전통적인 웹사이트이다. 사이트가 서버로 데이터를 보내거나 새로운 데이터를 표시할 때마다, 브라우저에 렌더링 될 요청을 서버에게 한다.
Vue는 MPA를 만들기에 매우 간단하다. 여러 기능들과 컴포넌트들을 페이지에 통합시키는 Vue.js 라이브러리를 임포트하면, 다른 과정은 필요하지 않는다. 전반적으로 Vue, React 모두 MPA에 javascript 기능들을 추가하기에 좋다. 하지만 JSX와 같은 스텝들이 필요하지 않기 때문에, React보다는 Vue가 조금 더 낫다고 생각한다. Angular는 MPA를 만드는 데는 추천하지 않는다. Angular의 컴포넌트들에 all-in-one 접근방식과 Typescript의 사용은 적합한 프레임워크가 아니다. HTML에 Angular 패키지들을 import 하는 것은 불필요하게 복잡하다.
👉 Multi-page app : Vue >= React >>>>> Angular
4) Performance benchmarks
느린 로딩 타임과 저조한 퍼포먼스는 웹사이트에서 치명적인 리스크이다. 한 페이지를 모두 렌더링하기 위해 유저를 몇 분 동안 기다리게 하는 것은 치명적인 유저 경험이다.
깃헙에 있는 javascript 프레임워크 벤치마크를 참고하여 각 프레임워크들의 퍼포먼스를 살펴보았다.
위 그림에 따르면 Angular가 React와 Vue에 비해 시작 시 조금 더 느리다. Angular가 빠른 프레임워크이지만 번들 사이즈가 크다. 그래서 큰 앱을 만들 때, React, Vue보다 더 빠른 퍼포먼스를 보인다. React와 Vue는 작은 어플리케이션에서는 비슷하다.
👉 Performance Benchmarks : 모두 훌륭한 런타임 퍼포먼스를 보인다
5) Deployment
배포하는데 전반적으로 가장 어려운 프레임워크는 Angular이지만, Angular CLI를 사용한다면, 이 프로세스는 대부분의 일이 되어있기 때문에 간단하다. Angular CLI는 프로젝트 생성부터 코드 최적화까지 모든 것을 한다. 하나의 명령을 실행하면 모든 정적 호스트에 완전히 최적화된 번들 앱을 배포할 수 있다. 앱을 범용으로 전환하는 것(서버사이드 렌더링) 또한 한 번의 명령으로 가능하다.
React 앱을 빌드하고 배포하는 것 또한 쉽다. create-react-app을 사용하면, 개발 및 최종 프로젝트 구축에 필요한 모든 것을 포함하는 완전히 사전 구성된 새로운 React 앱을 생성한다. 주어진 구성으로 모든 정적 호스트에 배포할 수 있는 완전히 최적화된 프로젝트를 만들 수 있다. Angular CLI와는 달리 명령어 하나로 서버사이드 렌더링은 할 수 없다.
Vue의 경우, CLI로 사전 구성된 모든 것들을 포함한 강력한 프로젝트를 구성할 수 있다. 개발이 쉽고 Angular, React처럼 내장된 명령어를 실행함으로써 최적화된 프로젝트를 시작할 수 있다. Vue 프로젝트는 어떤 정적인 호스트에도 배포될 수 있고, 서버사이드 렌더링을 켜는 것이 비교적 쉽다.
👉 Deployment : 모든 프레임워크들이 관리하고 배포하기 쉽다
Reference
참고 : javascript 프레임워크 벤치마크
참고 : Vue vs React vs Angular
