Vue.js 사용하는 이유 :: 마이구미

이 글은 Vue, Angular, React 를 비교하는 글이 아닌 단순히 Vue.js의 장점을 다룬다.

Vue 이외에는 눈으로만 보았기에, Vue에 편중되어 보여질 수도 있다는 점을 미리 언급한다.

세가지 비교는 참고 링크를 읽어보길 바란다.

읽기 전 참고할 링크 - Virtual DOM && Top 7 reasons Vue.js && Vue, Angluar, React 비교

Vue는 요즘 핫한 자바스크립트 프레임워크로 사용되고 있다.

React와 Angular가 항상 비교 대상이였지만, Vue의 등장으로 크게 3가지로 비교되고 있다.

Vue의 등장은 신선했다.

왜냐하면 Vue.js는 혈통 없이 React와 Angular의 성공과 실패로부터 만들어졌다.

크게 React(Virtual DOM)와 Angular(양방향 바인딩)의 장점을 가져왔기에, 반은 먹고 들어간다.

Vue.js의 장점들은 다음과 같다.

1. 학습 곡선이 낮다.

Vue를 접해보았다면, 굉장히 쉽다는 것을 느꼈을 거라 생각한다.

사실 사람마다 틀릴 수 있으나, 알려진 학습 곡선은 Angular > React > Vue 순이 된다.

본인의 경우에도 Angular와 Vue를 비교했을 때, Angular는 굉장히 어려웠고, Vue는 굉장히 쉬웠다.

Vue의 공식 문서도 이해하기 쉽게 설명했다고 생각한다.

한글 번역까지 많은 분들이 기여해주셔서, 두려워할 필요가 없다.

2. 컴포넌트

대규모 프로젝트에 있어, 유지보수와 재사용성을 높이기 위해 작은 단위로 쪼개어 관리한다.

현재 개발 구조로 이미 컴포넌트 방식이 대세이고, 당연하게 그렇게 진행되고 있는 추세이다.

이 부분은 Vue, Angular, React 모두 동일한 부분이다.

다른 점은 본인이 Vue에서 가장 극찬하는 부분이 있다.

바로 "단일 파일 컴포넌트" 이 부분이다.

App.vue

<template lang="html">
  <div>
   {{ msg }}     
  </div>
</template>

<script>
  export default {
    data () {
      return {
        msg: "Hello World"
      }
    }
  }
</script>

<style scoped>
  
</style>

위와 같이 .vue 파일 하나에 html, css, js를 작성할 수 있다.

결과적으로 단일 파일 컴포넌트는 캡슐화를 제공하게 된다.

이로써, 보다 깨끗하고 풍부한 컴포넌트를 표현할 수 있다.

마치 생소한 용어일 수도 있으나 Shadow DOM 같은 느낌이 든다.

React에도 필요한 경우 Shadow DOM 관련 모듈을 사용하는 것을 볼 수 있다.

그와 달리 Vue는 단일 파일 컴포넌트를 사용하면 다른 작업 필요없이 관련 효과를 낼 수 있다.

* Shadow DOM - DOM 및 CSS 캡슐화 목적. (관련 문서 - Shadow DOM)

하지만 React의 jsx 문법과 같은 것을 선호한다면, 이 부분에 대한 생각이 다를 수 있다.

* 단일 파일 컴포넌트는 권장하지만, 의무적인 것은 아니다.

3. 성능

Vue.js는 가볍고 빠르다.

Virtual DOM에 있어서도, React와 비교해서 보다 효과적인 성능을 낸다고 알려져있다.

그렇기에, 적은 오버헤드와 빠른 성능을 낼 수 있다.

4. View 최적화

Vue의 디자인은 MVVM 패턴에 영감을 받아서, View에 최적화되어있다.

DOM 조작에 있어, 기존 jQuery를 통한 DOM 조작은 더이상 필요하지 않다.

관련 내용은 링크를 참고하길 바란다. "jQuery 더이상 쓰지 않아야하는가?"

View에 최적화되어 있기 때문에, View의 동적 변화에 대한 처리가 매끄럽고 용이하다.

또한 페이지 전환 및 이벤트에 따른 애니메이션 작업에 있어, 개발하기에 좋다.

그에 관련된 transition과 transition-group 태그가 따로 분리되어 있어, View에 중점된 모습을 볼 수 있다.

관련 문서 - https://kr.vuejs.org/v2/guide/transitions.html

5. 많은 모듈

중앙 집중식 상태 관리 저장소를 위한 vuex 

SPA를 위한 vue-router

유효성 검증을 위한 vue-vaildator

HTTP, Ajax를 위한 vue-resource

Vue에 최적화된 개발자 모드를 위한 vue-devtools 등등.......

효율적이고, 필요한 모듈이 웬만하면 존재하고, 이것 또한 학습곡선이 높지 않다.

6. 가능성

그래도 현재 React가 점유율에서 막강하다.

하지만 입문에 관한 통계를 보면, Vue가 훨씬 가파른 곡선이 보여지고 있다.

통계 자료나 세미나 및 컨퍼런스의 주제를 봐도 현재 많이 도입되고 있는 상황이라고 본다.

긍정적으로 바라보고 있기에, 앞으로도 기대해볼만하다.