Search
Duplicate
🔍

React와 Vue의 장단점 비교

간단소개
React.js와 Vue.js에 대해 알아보고 정리한 글 입니다.
ContributorNotionAccount
주제 / 분류
React
Vue
태그
React
Vue
Scrap
팔만코딩경 컨트리뷰터 (Library DB (속성)에 관계됨)에 관계됨
7 more properties

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를 선택해서 사용하면 될 것 같다.
참고 사이트 :