리액트(React.js) vs 뷰(Vue.js)

리액트(React.js) vs 뷰(Vue.js)

web frameworks 출처: stackoverflow

 2021년 StackOverFlow에서 조사한 웹 프레임워크 사용 순위에서 react.js가 1위를 했다. vue의 사용이 증대되고 있지만 아직까지 크게 순위적인 차이가 나지 않은 것 같다. 

 리액트와 뷰의 차이점이 라이브러리와 프레임워크라는 것은 알고 있었지만, 정확한 차이점에 대해서 인지하지 못한 채 리액트만 사용해왔다. 뷰 역시 사용해 볼 계획이기 때문에 뷰를 학습하기 전 어떠한 차이점이 있는지 궁금했다. 내가 사용하고 있는 도구가 어떤 장점과 단점이 있는지 파악해 보고 사용하도록 하자.

 UI 라이브러리  vs  프레임워크 

 react와 vue의 차이점에 있어 가장 대표적인 것은, 먼저 react는 UI 라이브러리이며 Vue는 프레임워크라는 것이다.

react

view

 라이브러리는 참고가 용이하고, 라이브러리의 일부분만 가져와서 사용하는 게 편리하다. 그리고 리액트는 UI 라이브러리이기 때문에 리액트 자체만으로는 전역 상태 관리, 라우팅, 빌드 시스템 등을 지원하지 않는다. 그렇기 때문에 리액트는 별도의 라이브러리를 통해 Redux, Recoil, React-router-dom 등을 사용해야 한다. 그렇기 때문에 사용자가 필요할 때에 필요할 때 가져다 쓰고, 빼며 부분적으로 사용이 가능하다.

 

 반면 뷰는 자바스크립트 프레임워크이다. 부분적인 사용이 불가능하고 프레임워크 안으로 들어가서 프레임 워크가 지원해주는 문법에 따라 작성해주어야 한다. 그렇기 때문에 라이브러리와 달리 더 많은 기능을 디폴트로 제공해준다.

 

 이러한 성격으로 인해 리액트는 리액트는 자바스크립트 문법을 응용하여 개발자에 따라 자유롭게 개발을 할 수 있고, 뷰는 프레임워크 사용에 지정된 문법 방식으로만 개발할 수 있다.

코드 형태의 차이

 앞서 언급했듯 리액트와 뷰는 코드를 작성하는 방법이 다르다. 리액트는 JSX(JavaScript XML) 형태로 코드를 작성하여 JavaScript 문법을 응용하기 때문에 JavaScript만으로 UI 로직과 DOM을 구현한다. 

 

 하지만 뷰는 HTML, JS, CSS 코드 영역을 분리해서 작성한다. ".vue " 파일을 만들 때에도 패턴이 존재한다. ". vue"에서 <template>에 HTML 작성 영역, <script> 안에는 JS, <style> 안에 CSS를 작성한다.

리액트는 뷰에 비해 자유롭게 자바스크립트를 통해 코드를 구현할 수 있다. 하지만 뷰는 뷰에서 제공해주는 방법을 반드시 사용해야 한다. 뷰는 정해진 방법만 사용하기 때문에 자유도가 낮지만 그만큼 코드 작성에 있어서 용이하기 때문에 리액트보다 접근성이 더 좋지 않을까란 생각이 든다.

 

 이러한 패턴의 차이로 인해 호불호가 나뉘지만, vue에서 작성되는 코드가 가시성 및 생산성이 좋다는 평이 많다.

컴포넌트 분리와 재사용

 리액트의 가장 큰 장점 중 한가지는 컴포넌트의 생성 및 재사용이라고 생각한다. 파일별로 컴포넌트를 분리할 수 있으며, 새로운 함수형 컴포넌트를 생산하고, props 형태로 전달하거나 또는 다른 곳에서 재사용하는 것이 매우 용이하다.

 

 하지만 뷰는 새로운 컴포넌트를 만들어 분리하기 위해서 새로운 파일을 하나 더 만들고, 그에 따라 하나의 파일에 해당하는 template, script, style 모두 작성해주어야 한다. 뿐만 아니라 props를 전달하는 과정에서도 해당 컴포넌트를 사용하는 모든 파일을 오가며 작성해주어야 한다.

진입 장벽

  앞서 코드 형태의 차이에서 언급했다 싶이 리액트는 뷰에 비해 자유도가 높기 때문에 진입장벽이 더 높다. JS가 지금보다 미숙할 때 리액트부터 배웠을 때 그 지나친 자유도로 인해 리액트 학습을 포기하고 싶을 정도였다. (아직 뷰를 제대로 배우진 않았지만) 뷰는 그에 비해 월등히 쉽다고 생각한다. 뿐만 아니라 리액트는 라이브러리이기 때문에 필요한 라이브러리에 대한 이해도 및 사용방법을 익혀야 한다. 추가로 프론트엔드에서 가장 중요한 상태 관리만 해도 알아야 할 것들이 너무나 많다. 가장 유명한 Redux, MobX 뿐만 아니라 최근 떠오르는 Recoil, Context API. 그리고 상태 관리와 관련된 수많은 미들웨어의 사용법 등 너무나 알아야 할 것, 학습해야 할 것들이 많다.

 

 뷰 또한 상태 관리를 위해 학습이 필요하지만 대표적으로 가장 중요한 VueX 이외의 것을 들어보지 못했다. 그만큼 상태 관리를 위한 라이브러리가 다양하지 않을뿐더러 리액트에 비해 단순화되어있다. 뷰 또한 다양한 학습이 필요하지만 리액트 이후에 개발된 것으로, 리액트의 단점을 어느 정도 보완하였기 때문에 웬만한 기능들을 탑재하여 진입 장벽을 낮추었다.

각 도구의 장단점

TypeScript

 타입스크립트로 대표되는 자바스크립트의 정적 표현이 리액트를 사용할 때 편리할 뿐 아니라 함수형 프로그래밍을 적극적으로 활용하기 쉽다. 리액트는 모든 코드를 ts로 구현하는 게 뷰 보다 쉽다. 뷰 또한 ts를 지원하지만, ts를 사용하기 위해서 많은 부분에서 ts용 모듈을 사용하고, 코드 변경이 필요하다. 

 

 뿐만 아니라 뷰를 기반으로 한 프레임워크인 Nuxt.js에서 아직 ts의 호환이 아쉽다. vue.js 2 보다 3가 ts를 적극적으로 지원하고 있으나, 현재 nuxt는 vue3부터 제대로 작동하지 못하기 때문에 ts 적용에 더 많은 어려움이 있다.

속도

 아주 미세한 차이이기 때문에 사용자 경험 측면에서 느낄 정도의 차이는 아니지만, 실제로는 뷰가 리액트에 비해 조금 더 빠르다고 한다. 그렇기 때문에 속도 이슈에 민감한 코인 거래 사이트에서도 vue를 사용하는 경우가 있다고 한다.

러닝 커브

 앞서 진입장벽에서 언급했듯 뷰가 리액트에 비해 러닝 커브가 낮다. 뷰의 기본적인 파일 구조가 웹의 기존 구현 방식인 html, css, js와 나워서 개발하는 방식과 유사하며 자유도가 낮기 때문에 오히려 쉽게 익힐 수 있다는 장점이 있다. 때문에 개발하는 데 많은 시간을 절약할 수 있도록 한다.

---

결론

 뷰가 진입장벽이 낮고 사용하기 용이함에도 불구하고 NPM 기준으로 React와 view의 주간 다운로드 수는 최대 4배 이상 엄청난 차이가 난다. stackoverflow 차트에서도 react의 사용이 더 많은 것을 확인할 수 있었다. 명확하게 리액트가 월등이 좋다고 할 수는 없지만, 진입 장벽이 더 높음에도 불구하고 그만큼 자유도와 typescript의 사용, 변화에 빠른 점, 월등한 사용량으로 인한 시장 크기 차이로 인해 아직 까지 vue가 react를 따라잡기에는 무리가 있어 보인다.

 뷰 역시 다양한 장점을 가지고 있고, 국내 유수한 기업에서도 사용하듯 그만의 훌륭한 기능을 가지고 있다. 그렇기 때문에 자신의 프로젝트 규모와 시간에 맞는 알맞은 라이브러리 또는 프레임워크를 찾아보고 사용하도록 하는 것이 좋을 것이다.

---

참고

• https://reactjs.org/

React – A JavaScript library for building user interfaces

• https://vuejs.org/

Vue.js

• https://velog.io/@leehaeun0/React-vs-Vue-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EB%B9%84%EA%B5%90

React vs Vue 장단점 비교

• https://innvonixtechnologies.medium.com/difference-between-vue-js-vs-react-js-infographic-6f2634f737c

Difference Between Vue.js vs. React.js — Infographic

• https://brunch.co.kr/@skykamja24/573

리액트(React.js)와 뷰(Vue.js)의 차이점