React와 Vue의 장단점 비교
React
Vue
비교
1. React
1) React란 ?
리액트(React, React.js, ReactJS)는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.
페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다. 리액트는 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용될 수 있다.
대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야 한다.
2) 장점
•
가상 DOM을 사용해서 갱신되는 싱글 페이지 애플리케이션의 리플로우와 리페인트를 최소화함으로써 성능을 최적화 시킨다.
•
컴포넌트 기반의 아키텍쳐를 가지고 있어, 재사용 가능한 컴포넌트는 생산성과 유지 보수를 용이하게 한다.
•
단방향 데이터 바인딩으로 안정성이 보장된다.
•
React 공식 문서 가이드와 방대한 커뮤니티, 자료를 통해 쉽게 접하고 배울 수 있다.
3) 단점
•
앱의 규모가 커지면 속도가 느려진다.
•
View 이외의 데이터 모델링 등은 직접 구현하거나 라이브러리를 사용해야 하므로 javascript에 대한 지식이 필요하다.
•
데이터 모델링, 라이팅, Ajax 등 기능 지원이 되지 않는다.
2. Vue
1) Vue란 ?
Vue(Vue.js, vju, view)는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 자바스크립트 프레임워크이다.
다른 자바스크립트 라이브러리를 사용하는 웹 애플리케이션 프로젝트에 Vue.js를 도입하기 쉽게 설계되어 있는데, 이는 Vue.js가 점진적으로 채택할 수 있게 설계되어 있기 때문이다.
이 프로젝트는 웹 UI 개발(컴포넌트, 선언형 UI, 핫 리로딩, 타임 트래블 디버깅 등)의 아이디어를 더 접근 가능하도록 만드는데 초점을 둔다. 덜 독선적이도록 시도하고 있기 때문에 개발자들이 익히기에 더 쉽다.
한편 Vue.js는 고성능의 싱글 페이지 애플리케이션(SPA)을 구축하는데 이용가능하다.
2) 장점
•
양방향 데이터 바인딩 방식을 이용한다. 즉, 화면에 표시되는 값과 프레임워크 모델 데이터 값이 동기화되어 한쪽을 변경하면 다른 한쪽도 자동으로 변경된다.
•
컴포넌트기반 프레임워크로 가상 DOM 랜더링 방식을 사용한다. 화면 젠체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면이 갱신되므로 유지보수와 재사용성이 높다.
•
HTML, CSS, JS만 알고 있어도 사용이 가능하여 배우기 쉽다.
3) 단점
•
테스트가 어렵고 재 구조화가 쉽지 않다.
•
모바일 지원이 부족하다.
•
커뮤니티 등의 자료가 React에 비해 많지 않다.
3. 비교
1) React와 Vue의 공통점
•
가상 DOM을 활용한다.
•
반응적이고 조합 가능한 컴포넌트를 제공한다.
•
코어 라이브러리에만 집중하고 있고 라우팅 및 전역 상태를 관리하는 컴패니언 라이브러리가 있다.
2) React와 Vue의 차이점
•
React는 단방향 데이터 바인딩이고 Vue는 양방향 데이터 바인딩 방식을 이용한다.
•
리액트는 JSX(JavaScript XML) 형태로 코드를 작성하는데 자바스크립트만을 사용해 UI 로직과 DOM을 구현한다.
•
Vue의 가상 DOM구현이 React보다 빠르며 오버 헤드가 적게 발생한다.
•
React에서 모든 컴포넌트는 JSX를 사용해 JSX의 툴을 이용해 Vue의 템플릿보다 진보된 기능을 사용할 수 있다.
•
Vue는 템플릿을 사용해 쉽고 빠르게 제작이 가능하며 진입장벽이 낮다.
정리
React는 확장성이 좋으나 자바스크립트 문법에 능숙해야하며 커스터마이징 및 자유도가 높은편이다. 또한 커뮤니티 형성이 잘 되어있고 큰 프로젝트에 용이하다.
Vue는 제공되는 html 기반의 템플릿이 있어 진입장벽이 낮고 프로젝트를 빠르게 만들 수 있다. 개발자간 코드가 통일성이 있으며 소규모 프로젝트에 용이하다.
사용 용도와 역량에 맞게 React나 Vue를 선택해서 사용하면 될 것 같다.
참고 사이트 :
