[React] React / Vue 장단점 및 비교 정리

1) React란 ?

리액트(React)는 SPA의 UI를 만들기 위해 사용하는 자바스크립트 라이브러리이다. 

장점 :

• 가상 DOM을 사용해서 SPA의 리플로우와 리페인트 과정을 최소화함으로써 성능을 최적화 시킨다.
• 컴포넌트 기반의 아키텍쳐를 가지고 있어, 재사용 가능한 컴포넌트는 생산성과 유지 보수성을 높인다.
• 단방향 데이터 바인딩으로 안정성이 보장된다.
• React 공식 문서 가이드와 방대한 생태계를 통해 쉽게 접하고 배울 수 있다.
• Typescript 사용에 용이하다.

단점 :

• 앱의 규모가 커지면 속도가 느려진다.
• 리액트는 자유도가 높아서 개발자마다 코딩 스타일을 통일하는데에 커뮤니케이션 비용이 든다.
• Javascript에 대한 숙련도가 필요하기 때문에 상대적으로 Vue보다 러닝커브가 높다.

2) Vue 란 ?

Vue(Vue.js, vju, view)는 웹 애플리케이션의 UI를 만들기 위해 사용하는 자바스크립트 프레임워크이다.

 

Vue.js는 고성능의 싱글 페이지 애플리케이션(SPA)을 구축하는데 이용 가능하다.

 

ex ) v-if, v-for

 

장점 :

• 양방향 데이터 바인딩 방식을 이용한다. 즉, 화면에 표시되는 값과 프레임워크의 데이터가 동기화되어 한쪽을 변경하면 다른 한쪽도 자동으로 변경된다.
• 컴포넌트기반 프레임워크로 가상 DOM 렌더링 방식을 사용한다. 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면이 갱신되므로 유지보수성와 재사용성이 높다.
• 뷰는 자바스크립트의 문법을 정확히 몰라도 뷰에서 제공해주는 문법만 배우면 잘 동작하는 것을 확인할 수 있어서 생산성도 빠른 편이다.
• HTML, CSS, JS만 알고 있어도 사용이 가능하여 배우기 쉽다. 즉, React에 비해 러닝커브가 낮다.

단점 :

• 테스트가 어렵고 재 구조화가 쉽지 않다.
• 모바일 지원이 부족하다.
• 커뮤니티 등의 생태계가 React에 비해 크지 않다.

 

3. React와 Vue의 공통점

• 가상 DOM을 기반으로 렌더링한다.
• 컴포넌트 기반의 개발이 가능하다.

 

4. React와 Vue의 차이점

• React는 단방향 데이터 바인딩이고, Vue는 양방향 데이터 바인딩 방식을 이용한다.
• 리액트는 JSX(JavaScript XML) 형태로 코드를 작성하는데 자바스크립트만을 사용해 UI 로직과 DOM을 구현한다.
• Vue의 가상 DOM구현이 React보다 빠르며 비용이 적게 발생한다.
• React에서 모든 컴포넌트는 JSX를 사용해 Vue의 템플릿보다 진보된 기능을 사용할 수 있다.
• Vue는 Vue에서 제공하는 문법이 정해져있어 빠르게 제작이 가능하며 진입장벽이 낮다.

 

5. 정리

React는 라이브러리이며, 단방향 데이터 바인딩 방식을 사용한다. 또한 자바스크립트 문법에 능숙해야하며 자유도가 높은 편이다. 또한 커뮤니티 형성이 잘 되어있고 큰 프로젝트에 용이하다.

Vue는 프레임워크이며, html 기반의 템플릿이 있어 자바스크립트 문법에 대한 진입장벽이 낮고 프로젝트를 빠르게 만들 수 있다. 개발자간 코드가 통일성이 있으며 소규모 프로젝트에 용이하다.

 

리액트는 자바스크립트 문법을 응용해서 개발자가 자유롭게 개발할 수 있는 환경이고, 뷰는 뷰에서 지정해준 문법으로만 개발할 수 있다.

 

👉🏻 사용 용도와 역량에 맞게 React나 Vue를 선택해서 사용하면 될 것 같다.

 

참고 : https://80000coding.oopy.io/f27f6183-0523-43e1-ab90-8f8175bd4a88

React와 Vue의 장단점 비교