[Vue] Vue & React의 차이와 장단점

들어가기전

 

그동안 React를 사용해서 프로젝트를 개발한 적이 많았다. 주로 React를 많이 사용한 것 같다. 

하지만 요즘들어서는 Vue로 추세가 기울어지고 있고 필자도 조금더 트랜드한 코드방식을 선호하고 있다.

 

React와 Vue를 설명하자면 이렇게 설명할 수 있다.

 

React는 라이브러리고 Vue는 프레임워크다.

리액트는 UI라이브러리인데 라이브러리라는 참조가 쉽고, 라이브러리의 일부분만 가져와 사용하는 게 편리하다. 또한 리액트는 UI라이브러리이기 때문에 리액트 자체만으로 전역 상태 관리, 라우팅, 빌드, 시스템을 지원하지 않는다.

 

리액트에서 앞선 기능들을 사용하기 위해서는 Redux, Mobx같은 상태관리 라이브러리를 사용해야 한다.

반면 Vue는 프로그레시브 프레임워크인데, 이 부분을 설명하자면 프레임워크가 아닌 프로그래시브라는 점 때문이다.

 

뷰의 코어 팀 맴버인 카와구치 카즈야씨가 집필한 책 Vue.js의 철저 입문의 첫 챕터를 보면 이와 같은 표현이 나온다.

01
프로그래시브
프레임워크 Vue.js

Vue.js(뷰-제이에스)는 뷰 레이어에 특화된 라이브러리

이게 무슨 이상한 표현일까? 바로 위에 챕터 제목에는 "프로그래시브 프레임워크"라고 하고선 바로 

아래에서는 라이브러리라고 표현 한 것 때문이다.

 

이는 뷰의 정체성에 직결되는 부분이라 할 수 있다. 뷰는 라이브러리 처럼 사용할 수 있도록 처음부터 설계되 

있었고, 이러한 이유에서 라이브러리라 표현할 수 있지만 지향하는 방향은 "프로그래시브(진보적인) 프레임워크" 즉, 일반 적인 프레임워크보다 더 자유도가 높으며, 시스템 수준에 따라서 프레임워크의 활용도를 결정할 

설계도를 만들었다.

 

리액트와 뷰의 장단점에 대해 말하는 사람들의 예로 흔이들 

리액트는 비교적 자유도가 높고, 뷰는 기능이 이미 다 정해져 있다라고 애기 하는데 

이것은 각자의 생태계 특성에서 영향을 받지 않았나 싶다.

 

라이브러리는 사용자가 필요할 떄문 가져다 썻다가 뺏다가 할 수 있으며 부분적으로 사용이 가능한 기능이다.

반면 프레임워크는 부분적인 사용이 불가능하고 프레임 워크의 안으로 들어가 프레임 워크가 지원해주는 

문법에 따라서 작성해주어야 제대로 동작한다.

 

이런 태생적인 특성 때문에 리액트는 리액트만의 대체 불가능한 문법이 지정되있다기 보다 

자바스크립트 문법을 응용해 개발자가 자유롭게 개발할 수 있는 환경이고, 

또 뷰에서는 지정해준 문법 방식으로만 개발이 가능하다.

 

자유도가 높은 React 와 한가지 방식으로만 작성 하는 Vue

예를 들어서 조건에 따라서 버튼을 보였다 안보이게 하는 기능을 구현해야 하는 상황이라면 리액트는 

개발자가 자바스크립트 문법을 사용하고 싶은 대로 써서 재량껏 기능을 구현하면 된다. 

 

자바스크립트의 삼항연산자를 사용하던 &&연산자를 사용하던 미리 만들어준 함수를 호출해 렌더링을

하던 그건 개발자가 선택하면 된다.

// && 연산자 방식
<div>
   {isVisible && <button> 조건에 따라서 사라지는 버튼 </button>}
</div>

// 삼항연산자 방식
<div>
   {isVisible ? <button>조건에 따라 사라질 버튼</button> : null}
</div>

뷰에서는 보이고 안보이고를 제어해줄 방식으로는 뷰에서 제공하는 v-if 단 한가지 방식밖에 없다.

<div>
   <button v-if="isVisible">조건에 따라서 사라질 버튼</button>
</div>

비슷한 예로, 배열을 돌면서 리스트를 랜터링 할때 리액트에서는 자바스크립트의 문법 map을 사용하던 

forEach 또는 for문을 사용하던 개발자의 선택이지만, 뷰에서는 뷰에서 제공하는 v-for로만 구현이 가능하다.

 

컴포넌트 분리, 재사용 측면에서는 React가 효율성이 좋다.

컴포넌트를 분리할 때에는 리액트에서는 한개의 파일에서 새로운 함수명 컴포넌트를 쉽고 깔끔하게 정의해서

만들 수 있고, 부모에서 자식으로 전달해주는 방식인 props를 사용해 함수에 인수 전달하듯이 매우 깔끔하게 

전달해줄 수 있다.

 

반면 뷰에서 새로운 컴포넌트를 분리하려면 먼저 새로운 파일을 하나 더 만들어야 하고, 그 안에는 

상황에 따라서 하나의 파일에 해당하는 template script style도 작성해줘야 할 것이다. 또 props를 

전달하는 과정도 2개의 파일로 오가며 진행해야 한다.

 

컴포넌트를 작은 단위로 분리하고 재사용 하는 프로세스에 있어서 React가 더 효율성이 높다고 판단된다.

 

두가지의 진입장벽

리액트의 진입장벽은 vue보다 더 높다. 진입장벽이 높다고 설명할 수 있는 이유로는 

뷰에서는 제공해주는 문법으로만 코딩이 가능하기에 개발자간에 코등 스타일에도 통일성이 생기지만

 

이에 반해 리액트는 자유도가 너~~~~~무 높아서 개발자마다 코딩 스타일을 통일하는데에 

커뮤니케이션 비용이 든다.

 

러닝 커브는 뷰가 리액트보다 낮다고 볼 수 있다.

프론트엔드에서 가장 중요하다고 볼 수있는 상태관리만 해도 압도적인 학습량 차이가 발생하고,

리액트는 mobX, Redux, Recoil 등의 상태관리 트렌드의 대한 변화도를 알아야 하고 리덕스의 경우에는 

수 많은 미들웨어에 대한 이해도 현업에서 일할때 중요하다.

 

반면 리액트는 모든 것이 다 자바스크립트계열이다. 

jsx라고 불리우는 html 역할을 하는 코드도 js의 확장된 문법이며 js안에서 쓰일것이며, css도 css파일을 

분리해서 따로 만들어주는 방식 말고 한 파일안에서 사용하려면 css-in-js 결국 자바스크립트를 써야한다.

 

뷰는 자바스크립트의 문법을 정확히 몰라도 뷰에서 제공해주는 문법만 배운다면 잘 동작하는 것을 확인

할 수 있어 생산성도 빠른 편이다.

 

리액트이 진입장벽으로는 redux, 라우팅, 상태관리 등등.. 이 있는데 뷰가 리액트의 고충들을 보안해서 

만들어진 언어라 vuex, vue-routing으로 같은 기능을 하더라도 문법차이로보면 vue쪽이 훨씬 쉬운편

 

타입스크립트는 리액트가 더 결합이 잘된다. 

 

리액트에서는 변화가 빠르고 혁신적이다.

프론트엔드의 변화를 선두한다고 볼 수 있는데, 리액트에서 새로운 기능이 나올때 추후에 

뷰에서 비슷한 기능이 나오는 편...

 

리액트에서는 자체적으로 지원해주는 기능은 제한적이고 프로그래밍의 자유도가 많이 보장된다.

그만큼 모든 상활에 대해 대처할 수 있는 부분에서는 더 유연할 수 있다.

 

결론

결론을 예기하자면 개인적으로 생각하기에는 본인의 Feel을 이용해서 알맞게 사용하면 된다.

두개의 라이브러리는 현재까지도 프론트엔드 언어를 대표하는 언어라 할 수 있고  

 

굳이 한가지 라이브러리만 사용할 것도 아니고 여러가지를 사용해볼 프론트엔드 개발자라면 

본인에 Feel의 맞게 사용하면 된다.

 

결국 무엇이 나은가? 라고하면 

 

아래와 같이 진행하고 싶다면 Vue를 추천한다.

• 규모가 작거나 가벼운 프로그램을 만들고 싶다 
• 속도에 대한 이슈에 매우 민감한 사이트
• 자바스크립트 문법에 미숙할때
• 기존의 html css js 구조로 작성된 코드를 SPA로 옮기고 싶다.
• 개발자간의 코드 통일을 이루어 커뮤니케이션 비용을 줄이고 싶다면 

또한 아래와 같이 진행하고 싶은 개발자는 React를 추천

• 프로젝트의 규모가 크거나 점점 확장된다면 
• 자바스크립트 문법을 사용하기에 능숙한 편
• 컴포넌트 자체가 작은 단위로 나뉘어 비슷한 UI 재사용을 하고 싶다면
• 타입스크립트를 이용해 개발할 것이다.
• 웹 & 앱 개발을 하고 싶다면?! = React-Native

 

참고 자료 

React vs Vue 장단점 비교

Vue를 알아야 한다. - 왜 사용할까?