React와 Vue의 차이점에 있어 가장 대표적인 것은, 먼저 React는 UI 라이브러리이며 Vue는 프레임워크라는 것이다.
라이브러리는 참고가 용이하고, 라이브러리의 일부분만 가져와서 사용하기 때문에 편리하게 원하는 것만 가져와서 사용할 수 있다.
그리고 React는 UI 라이브러리이기 때문에 React 자체만으로는 전역 상태관리, 라우팅, 빌드 시스템 등을 지원하지 않는다. 그렇기 때문에 React는 별도의 라이브러리를 통해 Redux, Recoil, React-router-dom 등을 사용해야 한다. 이렇게 사용자가 필요에 의해 가져다쓰고, 뺄 수 있다.
반면에 Vue는 자바스크립트 프레임워크이다. 부분적인 사용이 불가능하고 프레임워크 안으로 들어가서 프레임워크가 지원해주는 문법에 따라 작성해주어야 한다. 즉, 라이브러리와 달리 더 많은 기능을 Default로 제공해준다.
이러한 성격으로 인해 React는 자바스크립트 문법을 응용하여 개발자에 따라 자유롭게 개발할 수 있고, Vue는 프레임워크 사용에 지정된 문법 방식으로만 개발할 수 있다.
React와 Vue는 코드를 작성하는 방법이 다르다. React는 JSX(JavaScript X ML) 형태로 코드를 작성하여 JavaScript 문법을 응용하기 때문에 JavaScript 만으로 UI로직과 DOM을 구현한다.
하지만 Vue는 HTML, CSS, JS 코드 영역을 분리해서 작성한다. '.vue'파일을 만들때에도 패턴이 존재한다. '.vue'에서 <template>에 HTML 작성 영역, <script>안에는 JS, <style>안에 CSS를 작성한다.
React는 Vue에 비해 자유롭게 JS를 통해 코드를 구현할 수 있다. 하지만 Vue는 Vue에서 제공해주는 방법을 반드시 사용해야 한다. Vue는 정해진 방법만 사용하기 때문에 자유도가 낮지만 그만큼 코드 작성에 있어서 용이하기 때문에 React보다 접근성이 더 좋지 않을까 생각이 든다.
이러한 패턴의 차이로 인해서 호불호가 존재하지만, Vue에서 작성되는 코드가 가시성 및 생산성이 좋다는 평이 많다.
React의 가장 큰 장점 중 한가지는 컴포넌트의 생성 및 재사용이라고 생각한다. 파일별로 컴포넌트를 분리할 수 있으며, 새로운 함수형 컴포넌트를 생산하고, props 형태로 전달하거나 또는 다른 곳에서 재사용하는 것이 매우 용이하다.
하지만 Vue는 새로운 컴포넌트를 만들어 분리하기 위해서 새로운 파일을 하나 더 만들고, 그에 따라 하나의 파일에 해당하는 template, script, style을 모두 작성해주어야 한다. 뿐만 아니라 props를 전달하는 과정에서도 해당 컴포넌트를 사용하는 모든 파일을 오가며 작성해주어야 한다.
앞서 코드 형태의 차이에서 언급했다 싶이 React는 Vue에 비해 자유도가 높기 때문에 진입장벽이 더 높다.
뿐만 아니라 React는 라이브러리이기 때문에 필요한 라이브러리에 대한 이해도 및 사용방법을 익혀야 한다.
추가로 프론트엔드에서 가장 중요한 상태관리만 해도 알아야 할 것들이 너무 많다. 가장 유명한 Redux, MobX 뿐만 아니라 최근 떠오르는 Recoil, Context API, 그리고 상태관리와 관련된 수많은 미들웨어의 사용법 등 너무나 알아야 할 것들이 많다.
Vue 또한 상태관리를 위해 학습이 필요하지만 대표적으로 가장 중요한 VueX가 있고 나머지 상태관리를 위한 라이브러리가 다양하지 않고 React에 비해 단순화되어 있다. Vue 또한 다양한 학습이 필요하지만 React 이후에 개발된 것으로 React의 단점을 어느정도 보완하였기 때문에 웬만한 기능들을 탑재하여 진입장벽을 낮췄다.
TypeScript
타입스크립트로 대표되는 자바스크립트의 정적 표현이 React를 사용할 때 편리할 뿐 아니라 함수형 프로그래밍을 적극적으로 활용하기 쉽다. React는 모든 코드를 ts로 구현하는게 Vue보다 쉽다. Vue 또한 ts를 지원하지만, ts를 사용하기 위해서 많은 부분에서 ts용 모듈을 사용하고, 코드 변경이 필요하다.
속도
아주 미세한 차이이기 때문에 사용자 경험 측면에서 느낄 정도의 차이는 아니지만, 실제로는 Vue가 React에 비해 조금 더 빠르다고 한다. 그렇기 때문에 속도 이슈에 민감한 코인 거래 사이트에서도 Vue를 사용하는 경우가 있다고 한다.
러닝 커브
앞서 진입장벽에서 언급했듯 Vue가 React에 비해 러닝 커브가 낮다. Vue의 기본적인 파일 구조가 웹의 기존 구현 방식인 html, css, js와 나눠서 개발하는 방식과 유사하며 자유도가 낮기 때문에 오히려 쉽게 익힐 수 있다는 장점이 있다. 때문에 개발하는 데 많은 시간을 절약할 수 있도록 한다.
Vue가 진입장벽이 낮고 사용하기 용이함에도 불구하고 NPM 기준으로 React와 Vue의 주간 다운로드 수는 차이가 난다.
Stackoverflow 차트에서도 React의 사용이 더 높다. 명확하게 React가 월등이 좋다고 할 수는 없지만, 진입 장벽이 더 높음에도 불구하고 그만큼 자유도와 typescript의 사용, 변화에 빠른 점, 월등한 사용량으로 인한 시장 크기 차이로 인해 아직까지 Vue가 React를 따라잡지 못하고 있다.
Vue 역시 다양한 장점을 가지고 있고, 국내 우수한 기업에서도 많이 사용하는 추세이다. 따라서 자신의 프로젝트 규모와 시간에 맞는 알맞은 라이브러리 또는 프레임워크를 찾아보고 사용하도록 하는 것이 좋을 듯 하다.