✏️ Differences between vue2 and vue3 !?

들어가며

신규 프로젝트 2개에 투입됐는데, 두 개 모두 프레임워크 vue를 사용하지만
하나는 버전2, 다른 하나는 버전3로 작업을 진행한다고 한다.

👉 기존 버전과 버전3는 어떤 차이가 있는지 궁금해서 찾아보고 간략하게 정리해 본다.
'버전3에선 퍼블리싱만 하지만 궁금한건 찾아봐야지...'
(vue2에 대한 이해· 활용도도 완벽하지 않은데....🥲 )

1. vue.js?

Vue는 최신의 Javascript 프레임워크로 점진적 향상을 위한 유용한 기능을 제공한다. 기존 HTML 코드를 향상시킬 수 있으며, jQuery등의 라이브러리를 vue로 대체할 수 있다.

• 서버사이드 렌더링
• 가상의 DOM을 활용
• 반응적이고 조합 가능한 컴포넌트를 제공
• 코어 라이브러리에만 집중하고 있고 라우팅 및 전역 상태를 관리하는 컴패니언 라이브러리

2. vue@2.x 한계점

2-1. 대규모 프로젝트에서 코드의 복잡성

하나의 컴포넌트를 개발하는데 여러 기능이 함께 들어가야 하는 경우. 기능 하나에 대해 Vue 인스턴스의 데이터 영역에 변수 선언이 들어갈 것이고 메소드, 컴퓨트, 라이프사이클 훅 등 많은 부분으로 로직이 분리된다. 때문에 해당 기능의 코드를 이해하기 위해서 관련 옵션들을 위아래로 찾아보면서 이해해야 되는데, 프로젝트 규모가 크면 클수록 컴포넌트의 가독성과 유지 보수성이 떨어진다.(하단 composition API > option API 비교 사진 참고)

2-2. 컴포넌트 코드의 재사용

이전 버전에서 아래와 같은 방법으로 컴포넌트 코드를 재사용 할 수 있었으나, 컴포넌트 로직을 재사용 하기 위해 주로 이용한 mixin은 한계점이 존재했다. 특히, 대규모 프로젝트에서 믹스인을 통해 다중으로 상속하게 되면 컴포넌트 관리가 어려웠다. 예를 들어 중복된 이름으로 충돌이 일어나기도 하고 매개변수를 믹스인을 통해 전달할 수 없어 코드 재사용 시 유연성이 떨어졌다.

• slots & scoped slots
• mixins
• high order component

2-3. 타입 스크립트 지원

이전 버전에서도 typescript를 지원했지만 옵션 api 중심으로 객체 구조 방식을 사용했기 때문에 온전히 사용하기에는 한계가 있었다. typescript의 타입 추론 방식은 타입을 명시적으로 선언하지 않아도 추론이 가능해야 하는데 객체 구조 특성상 개발자가 일일이 타입을 정의해 줘야 하는 상황이 많았다.

3. vue@3.x

3-1. 성능 향상

• 가상DOM 최적화
• 트리쉐이킹(Tree shaking)강화

 * Tree Shaking(web pack 모듈) : 빌드시 실제로 사용하고 있는 코드 외 나머지 죽은 코드 제거 

3-2. 추가된 주요 기능 및 변경 사항

컴포지션 API

동일한 논리적 관심사와 관련있는 코드를 중심으로 함께 배치할 수있다면 코드의 가독성과 유지보수성을 높일수있다.

Teleport

해당 기능은 기존의 potal-vue 플러그인을 통해서 제공했던 기능이다. 전체 화면 모달이 포함된 컴포넌트를 만들 때를 사례로 들 수 있다. 대부분의 경우 컴포넌트 내에 모달 로직이 존재하길 원하지만, 위치 조정에 있어 CSS를 통한 해결이 어려워지거나 구조를 변경해야한다. 텔레포트 태그를 사용하여 구조를 변경하거나 모달 컴포넌트를 분리하지 않고도 HTML 특정 태그로 옮겨 렌더링할 수 있다.

	<teleport to="body">
     <div v-if="modalOpen" class="modal">
       <div>
         I'm a teleported modal!
         (My parent is "body")
         <button false>
           Close
         </button>
       </div>
     </div>
	</teleport>

Fragments 지원

이전 버전에서 컴포넌트는 단일 DOM 요소로 바인딩 해야 되었으므로 다중 루트 노드(multiple root node)를 가질 수 없었지만 3버전에서는 가질 수 있다. 프래그먼트는 실제 DOM 트리에서 렌더링 되지 않는 컴포넌트이기 때문에 중복 DOM 노드가 생기지 않고 다중루트노드도 가질 수 있다. 하지만 개발자가 속성을 상속해야 하는 위치를 명시적으로 정의해야한다.

속성상속은 non-prop attribute에서 자세히 확인할 수있다.

Emits 컴포넌트 옵션

그 외 추가된 사항 및 변경사항들은 공식문서를 참고바란다.

3-3. 사라진 기능

아래는 '키코드 지원' 항목만 예시를 간단히 들어 설명했다. 그 외 항목의 자세한 사항은 각각 링크된 공식문서사이트를 참고바란다.

❌ config.keyCodes 지원

 더이상 숫자를 사용한 키 입력 수식어가 지원되지 않는다.
따라서 사용하고 싶은 키에 케밥케이스(kebab-case) 형식키 이름을 사용권장한다

<!-- 기존 -->
<input v-on:keyup.13="submit"/>
<input v-on:keyup.enter="submit"/>

<!-- 변경 : only 키 수식어 -->
<input v-on:keyup.page-down="pageDown"/>

❌ $on, $off, $once 인스턴스 메소드
❌ filters
❌ 인타인 템플릿 속성

마치며

vue2에 한계점을 보완했다는 vue 3버전에 대해서 알게된 포스팅
거기다 그 한계점들을 조차 제대로 활용하지 못했던 내 자신도 발견했다..🐣
갈길이 멀다 (잘하고 이쒀!) 🥺

참고한 사이트들

• https://v3.ko.vuejs.org/guide/migration/introduction.html
• https://www.samsungsds.com/kr/insights/vue_js_3.html
• https://joshua1988.github.io/web-development/vuejs/vue3-coming/
• https://hasudoki.tistory.com/entry/VueJs-3-Composition-API-%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0-1setup-reactivemethods-computed
• https://github.com/vuejs/rfcs/pull/42#issue-286373012