리액트(React.js)와 뷰(Vue.js)의 차이점
초급 프론트엔드개발자를 위한 쉬운 설명
UI 라이브러리 vs 프레임워크
먼저 리액트는 UI 라이브러리입니다.(https://reactjs.org/) 다들 아시겠지만 라이브러리는 참조가 쉽고, 라이브러리의 일부분만 가져와서 사용하는 게 편리합니다. 또한 리액트는 UI 라이브러리이기 때문에 리액트 자체만으론 전역 상태 관리, 라우팅, 빌드 시스템 등을 지원하지 않습니다. 리액트에서 앞선 기능들을 사용하려면 Redux, Mobx 등을 사용해야 합니다.
반면 뷰는 자바스크립트 프로그레시브 프레임워크입니다.(https://vuejs.org/) 이 부분이 무척 재밌는 부분인데 프레임워크가 아닌 프로그레시브라는 점 때문입니다. 뷰의 코어 팀 맴버인 카와구치 카즈야씨가 집필한 책 Vue.js 철저입문 첫 챕터에 보면 이와 같은 표현이 나옵니다.
01
프로그레시브
프레임워크 Vue.js
Vue.js(뷰-제이에스)는 뷰 레이어에 특화된 라이브러리다.
잉? 이게 무슨 이상한 표현일까요? 바로 위에 챕터 제목에는 "프로그레시브 프레임워크"라고 하고선 바로 아래는 라이브러리라고 표현합니다.
이는 뷰의 정체성과 직결되는 부분입니다. 뷰는 라이브러리처럼 사용할 수 있도록 처음부터 설계됐고, 이러한 이유에서 라이브러리라고 표현할 수 있지만, 지향하는 방향은 "프로그레시브(진보적인) 프레임워크" 즉 일반적인 프레임워크보다 더 자유도가 높으며, 시스템 수준에 따라 프레임워크의 활용도를 결정할 수 있게 설계됐습니다.
그럼 도대체 라이브러리와 프레임워크는 어떤 차이가 있는걸까요? 라이브러리와 프레임워크를 헷갈리시는 분들이 많은데 쉽게 설명하면 다음과 같습니다.
프레임워크는 코드를 프레임에 맞춰서 개발합니다. 단편적인 예로 뷰에서는 파일을 만들 때 .vue라는 형태에 맞춰 사용합니다. 물론 .vue가 아닌 .js 파일을 사용해 프로젝트를 만들 수도 있지만 효율성이 훨씬 떨어집니다. 프레임워크는 프레임을 따라 개발하는 데에 최적화된 형태일 뿐 아니라 라이브러리와 달리 더 많은 기능을 디폴트로 제공합니다.
코드 형태
리액트와 뷰의 결정적인 차이점 중 하나는 코드 형태입니다. 리액트는 jsx(JavaScript XML) 형태로 코드를 작성하는데 자바스크립트만을 사용해 UI 로직과 DOM을 구현합니다. 반면 뷰의 경우 HTML, JS, CSS 코드 영역을 분리해서 작성합니다. 예를 들어 하나의 .vue 파일을 만들 때에도 패턴이 정해져 있습니다. <templete>에는 HTML 작성 영역, <script> 안에는 자바스크립트, <style> 안에는 CSS를 작성합니다. 이러한 패턴 덕분에 뷰가 리액트보다 코드 가시성 및 생산성이 좋다고 평가하는 개발자 분들이 많습니다.
Typescript
개인적으론 뷰가 코드를 작성하기 쉽고, 생산성도 더 잘 나오지만 현업에서 리액트가 강한 인기를 얻고 있는 이유는 많습니다. 그중 하나는 타입스크립트로 대표되는 자바스크립트의 정적 표현이 리액트를 사용할 때 편리할 뿐 아니라 함수형 프로그래밍을 적극적으로 활용하기 쉽습니다. 함수형 프로그래밍을 하기 위해선 순수 함수 및 매개변수의 데이터 타입을 고정하는 작업이 필수적인데 ts를 사용해 쉽게 처리할 수 있을 뿐 아니라 리액트는 모든 코드를 ts로 구현하는 게 뷰보다 쉽기 때문에 강점이 있습니다.
그럼 뷰는 ts를 지원하지 않느냐 물으실 수 있는데, 뷰도 ts를 지원합니다. 그러나 ts를 사용하기 위해선 많은 부분에서 ts용 모듈을 사용해야 하고, 특히 뷰에서 이를 사용하기 위해선 ts와 ts 모듈들을 위한 코드 변경에 노력이 필요합니다. 제 경우엔 뷰 프로젝트를 만들 때 vue-cli 보다는 nuxt를 사용하기 위해 create-nuxt-app을 사용하는 일이 많은데, nuxt의 ts 호환이 아쉬운 점도 불편함의 원인입니다. nuxt는 뷰의 최신 버전인 Vue3를 제대로 호환하지 못하는 점도 있습니다. Vue.js 3가 2보다 ts지원을 더 적극적으로 하고 있는데 nuxt는 Vue3부터 제대로 작동하지 못하니 ts에 대한 적용은 더 어려운 상황이 됩니다.
진입 장벽
리액트의 진입장벽이 더 높습니다. 제가 이렇게 단언할 수 있는 이유는 실제로 배워야 할 것들이나 코드의 자유도가 훨씬 높기 때문입니다. 프론트엔드에서 가장 중요한 부분인 상태관리만 해도 압도적인 학습량 차이가 발생합니다. 리액트는 mobX, 리덕스, 리코일 등의 상태관리 트랜드의 변화도 알아야할 뿐 아니라 리덕스의 경우 수 많은 미들웨어에 대한 이해도 현업에선 중요합니다. 대기업에서도 리덕스와 리덕스 미들웨어만 며칠동안 강의해줄 수 있냐는 문의가 오곤 합니다.
그 밖에 연동되는 모듈도 압도적으로 차이납니다. 이는 리액트 생태계를 풍성하게 만들기도 하지만 반대로 배워야 할 것을 비약적으로 늘리게 되고, 회사마다 코드 패턴이나 아키텍처가 일치하지 않기 때문에 더 나은 코드에 대한 고민도 많이 하게 됩니다. 이러한 현상이 발생하는 이유는 리액트가 UI 라이브러리이기 때문입니다. 웹 애플리케이션을 제작하기 위해선 수많은 작업이 들어가는데 단순히 UI 라이브러리만 사용해서는 완성할 수 없습니다. 그러다 보니 초심자 입장에선 리액트를 배운다고 해도 상태 관리, 라우팅, 빌드 시스템 등을 모두 만들어가는 게 버겁게 느껴질 수 있습니다. 물론 뷰에도 상태 관리, 라우팅을 처리하기 위해선 vuex, vue-routing 등의 모듈을 사용하게 됩니다. 하지만 차이가 있다면 뷰는 만들어질 당시부터 리액트의 어려움을 보고 만들어졌기 때문에(뷰는 리액트 출시 1년 후에 나왔습니다) 해당 기능들에 대한 구축 및 개발을 빌트인에 가까운 수준으로 설명하고, 사용할 수 있습니다.
이렇게 빌드 과정이 어렵기 때문에 리액트에서는 create-react-app(https://reactjs.org/docs/create-a-new-react-app.html)을 만들게 됐습니다. cli 명령 하나로 리액트를 사용한 프로젝트를 빠르게 만들어주기 때문에 무척 간편하지만 그 안에 들어가는 세부적인 개념들을 알기까지는 비교적 시간이 걸립니다.
반면 뷰는 상대적으로 낮은 진입장벽을 가집니다. 개발자들이 뷰를 배울 때 vue-cli(https://cli.vuejs.org/)를 통해 프로젝트를 만들고, 코드를 수정해보면서 하나하나 업그레이드하게 됩니다. 페이지와 컴포넌트, 라우팅 등을 이미 주어진 코드 프리셋에서 조금씩 수정하면서 만들어보다 보니 쉬울뿐더러 HTML, JS, CSS 영역이 분리되어 있어서 이해하기 쉽습니다.
이를 리액트의 코드와 비교해 보면 더 명확합니다. 리액트는 처음 마주하게 되는 코드 중 하나가 React.createElement() 입니다. 엘리먼트를 생성할 때 사용하는 명령이라는 건 알 수 있지만 이 안에 들어가는 매개변수가 3가지입니다. 표현하면 React.createElement(component, props, ...children) 입니다. 코드 한 줄만 봐도 벌써 알아야 하는 정보가 많다는 게 느껴집니다. component는 어떤 형태로 작성하는 것인지, props는 무엇을 전달할 수 있는지, ...children은 어떤 데이터를 넣어줘야 하는지 초심자 입장에선 큰 덩어리 지식으로 느껴질 수 있습니다.
결론
차이점에 대해서 이런 저런 이야기를 적어봤습니다. 보통 차이점을 이야기하다보면 장단점을 이야기할 수 밖에 없고, 그러다보면 '결국 뭐가 더 나은거냐?' 라는 결론에 이르시는 분들이 많은 것 같습니다. 이런 이유에서 굳이 결론을 말해보자면 개인적으로 사용성과 생산성에 있어선 뷰가 좋지만, 트랜드나 범용성에 있어선 리액트에 우위를 두고 싶습니다.
단편적으로 npm에서 다운로드 횟수를 비교해보면 다음과 같습니다.
주간 다운로드가 리액트는 천만회라는 어마어마한 숫자에 비해 뷰는 1/4 수준인 240만회 수준입니다. 그만큼 정말 많은 프로젝트가 리액트로 현재 제작되고 있다는걸 알 수 있습니다.
앞서 이야기한 것처럼 함수형 프로그래밍 및 정적 데이터 타입을 사용하는건 웹 개발을 이끄는 하나의 트랜드가 되고 있습니다. 특히 백엔드 서버가 그래프큐엘 및 ts로 구축된 경우라면 프론트에서도 데이터를 정적으로 맞춰주어야 에러 헨들링이 더 간편해지고, 완성도가 높아지는데 이때 리액트가 뷰에 비해 훨씬 더 유리합니다. 그러나 뷰가 제공하는 코드 작성 패턴과 라이프사이클, 상태 관리는 쉬우면서 강력해 거의 원하는 모든 형태의 애플리케이션을 빠르게 만들 수 있도록 합니다.
프론트엔드를 이제 시작하시는 분들이라면 리액트와 뷰를 모두 맛보시길 권해드리고, 매커니즘 상의 유사점이 많아 실제로 공부해보면 1+1의 시간이 소요되지 않습니다. 그리고 2개를 모두 해야 오라는 곳도 2배로 넓어질테니 스팩을 업그레이드 하는 관점에서도 모두 하시는걸 추천하고 싶습니다.
웹 개발, 블록체인 컨트렉트 개발 문의: https://flexweb.io
