[입문] React vs Vue.js

드디어 jsp의 지옥에서 벗어난 나. 그동안 jsp로 짜여진 스파게티 코드를 질릴대로 본 나는 jsp와 권태기를 갖게 되었고... (다른 언어라고 다를 줄 알겠냐는 질문이 들어오겠지만 한 언어로 개떡같이 작성된 코드를 n년간 봐온다면 정말정말 그 언어가 싫어집니다! 아시궜어요!😭) 이번 프로젝트에서는 Vue 기반의 웹앱을 확장 개발한다는 얘기를 듣고 프론트 개발을 해보고 싶다고 스리슬쩍 부장님께 부탁을 드린게 바로 컨펌이 떨어졌다.

기쁨도 잠시, 사아실 나는 Vue 공식문서조차도 제대로 읽지 않았던 거시였다... 원래 다 이렇게 개발이랑 공부랑 동시에 하잖아요?^^... Vue js랑 많이 비교되고 비슷한 놈이 무엇이더냐 한다믄 React를 대표적으로 많이들 뽑을 것이고 (Angular도 있다.) 필자는 React도 제대로 공부한 적은 없으니 이 참에 두 가지를 비교해보고자 한다.

 

1. 프레임워크? 라이브러리?

뷰와 리액트의 메인 페이지에 들어가면 각각 뷰는 프레임워크, 리액트는 라이브러리라고 지칭하고 있다.
React는 라이브러리, Vue는 프레임워크. 그러면 이 둘의 차이는 무엇일까?

• 라이브러리는 사용자가 필요할 때 자유롭게 추가 / 삭제하며 부분적인 사용이 가능한 것을 말한다.
• 프레임워크는 프레임워크 안에서 프레임워크가 정해준 문법에 맞춰 작성해야하고 부분적인 사용이 불가능하다.

 

2. 비교해야 할 지표

표에는 Angular2도 포함되어있다. (출처 : https://belitsoft.com/front-end-development-services/react-vs-angular)

위의 테이블은 세가지를 아래와 같은 지표로 구분하고 있다. 
안전성 / 커뮤니티 / 문서화가 잘 되어있는가 / 러닝커브 / 부트스트랩을 적용할 수 있는가 / small / 코드의 재사용성 / 생산성 / 반응형 / 컴포넌트형식인가

각각의 프레임워크별로 정리를 하자면,

2-1. Angular(2기준)

• 방대한 규모의 커뮤니티가 있음
• 러닝커브가 제일 복잡하고 어려움
• 생산성이 낮음
• 문서화가 잘 되어있음
• 양방향 데이터 바인딩
• Typescript
• HTML 마크업 기반 템플릿 문법

가장 먼저 출시된 프레임워크로, 애플리케이션을 개발할 때 거의 모든 도구를 사용할 수 있는 만큼 러닝커브가 상당하다. 타입스크립트가 필수이며 문서에서도 example code가 대부분 타입스크립트이다. 이러한 특징으로 규모가 큰 애플리케이션 개발시에 용이하다. 

2-2. React

• 방대한 규모의 커뮤니티가 있음
• 러닝커브 보통
• 생산성 보통
• 문서화가 잘 되어있음
• 단방향 데이터 바인딩
• JSX기반

요즘 가장 뜨는 추세인 React, 공식사이트에서는 "사용자 인터페이스를 만들기 위한 JS 라이브러리"라고 명시하고 있다. 이에 파생되는 다양한 라이브러리가 있으며 인기가 많은 만큼 오픈소스나 참고할 수 있는 문서들이 많다. 하지만 이렇게 방대하고 자유도가 높기 때문에 진입장벽이 생각보다 높은 편이다. Vue와 Angular와는 다르게 단방향 바인딩을 제공한다. (트리형) 

2-3. Vue

• 상대적으로 커뮤니티의 규모가 작음
• 러닝커브 낮음
• 생산성 빠름
• 문서화가 잘 되어있음
• 양방향 데이터 바인딩
• HTML 마크업 기반 템플릿 문법

중국계 미국인이 개발하여 중국에서 많은 문서가 제공되고 있다. Vue는 공식사이트에서 "프로그레시브 JS 프레임워크"라고 명시한다. Vuex, vue-router와 같은 상태관리 라이브러리 / 라우팅 라이브러리를 공식 제공한다. React에 비해 기능이 공식적으로 다 정해져있기 때문에 비교적 자유도가 낮은 편이다.
프레임워크의 사이즈가 작기 때문에 작은 프로젝트를 진행할 때 용이하다. v-model 디렉티브를 이용한 양방향 바인딩을 지원하기 때문에 html 엘리먼트 값을 수정시에 js 데이터가 자동으로 변경된다.