-
[Vue.js] Vue 3 가 도입되면서 달라진 점Front-End(Web)/Vue 2022. 3. 13. 20:12반응형
🧐 서론
올해인 2022년 1월, Vue3의 안정화 버전(3.2.28)이 정식 릴리즈가 되면서, Vue 프로젝트의 기본 템플릿이 Vue3로 대체될 예정이다.
Vue 2에 비해 함수형 프로그래밍화 된 점, 이에 따른 다양한 문법의 변화와 기능의 추가 등이 동반되었다.
(Vue devtools 도 Vue3 버전으로 마이그레이션 되었으며, Vue 공식문서 역시 Vue3 개선점들을 기반으로 새로이 단장을 했다.)
지금 회사에서 사용중인 Composition API를 공부하면서 Vue3의 가장 큰 특징이자 코드포맷을 알아볼 수 있었다.
이를 계기로, 정식 릴리즈된 Vue3가 이전의 Vue2에 비해 보여주는 대표적인 차이점들은 어떤 부분들이 있을지 한 번 정리해보고 싶어졌다!!
📗 Vue 3 달라진 점들
1. 성능 향상
[가상 DOM 최적화]
기존 Vue 렌더링의 가상 DOM 설계는 HTML 기반 템플릿을 제공하고 이를 가상 DOM Tree로 반환한 후 실제 DOM의 어떤 영역이 업데이트되어야 하는지 재귀적으로 탐색하는 방식이었다. 그렇기에, 매 변경을 파악하기 위해 모든 트리를 확인하는 비효율성이 존재했다.
- 템플릿 구문에서 정적 요소와 동적 요소를 구분, 트리를 순환할 떄 동적 요소만 순환해서 탐색의 최적화를 반영했다.
- 렌더링 관련 객체(템플릿 내 정적 요소, 서브 트리, 데이터 객체) 등을 컴파일러가 탐지해 Renderer 함수 밖으로 호이스팅시켜 객체의 복수 생성을 방지한다.
- 컴파일러가 템플릿 내 동적 바인딩 요소에 플래그를 생성한다. 이를 통해 렌더링 속도를 향상시켰다.
[트리쉐이킹 강화]
트리 쉐이킹(Tree Shaking)이란 나무를 흔들어 잎을 떨어트리듯 모듈을 번들링하는 과정에서 사용하지 않는 코드를 제거하여 사이즈를 줄이는 최적화 방안을 의미한다.
Vue3는 컴파일러가 실제 사용하는 코드만 import하며, v-model과 같은 양방향 바인딩에서 트리 쉐이킹을 적용하여 번들 크기를 절반 이상으로 줄인다.
2. Composition API
Vue3의 가장 큰 특징이라고 할 수 있는 Composition API가 등장함에 따라, 함수형 프로그래밍 기반의 코드 템플릿의 변화가 일어났다.
여기서는 대표적으로 바뀐 부분들만 짚고, 자세한 내용은 별도로 정리한 포스팅을 참고해주기를 바란다!
- setup() 메서드 : 기존 컴포넌트 옵션들을 setup() 메서드 내에 선언 및 반환한다. 데이터에 반응형을 부여하는 ref() 및 reactive(), 기존의 computed(), watch() 모두 API 메서드들로 대체되었다.
- props : this 바인딩을 하던 방식에서, setup() 의 첫번째 인자로 받아 내부에서 활용할 수 있다.
- emit : this 바인딩을 하던 방식에서, setup() 의 두번째 인자인 context에 포함되어있다.
- Lifecycle Hooks : beforeCreate, created 가 setup() 으로 대체된다. 또, hooks 앞에 on들이 붙었으며, destroy는 unmount로 변경되었다.
이러한 컴포지션 API를 통해 코드의 가독성 향상, 재사용성의 개선, Typescript 타입 추론 등의 지원이 가능해졌다.
* Composition API 포스팅 : https://abangpa1ace.tistory.com/239?category=948651
[Vue] Composition API
이번에 새로 맡게 된 프로젝트에서는, Nuxt.js(Vue2)에 Composition API를 적용하는 기술스택으로 개발이 되고있다. Vue3가 정식 릴리스되면서 Vue2와의 큰 차이점중 하나인 Composition API에 대해 학습할 필
abangpa1ace.tistory.com
3. Fragment
Vue2 에서는 <template> 내에 단일 태그로 랩핑을 필수적으로 해야 했다. (Vue 인스턴스를 단일 DOM 요소로 바인딩했어야함)
하지만, Vue3 는 <Fragment> 태그를 지원하며, 이를 통해 다중루트 노드(multiple root node)를 작성할 수 있게 되었다. (Fragment는 DOM 트리에 그려지지 않음)
<!-- Vue2 --> <template> <div> <header>...</header> <main>...</main> <footer>...</footer> </div> </template> <!-- Vue3 --> <template> <header>...</header> <main v-bind="$attrs">...</main> <footer>...</footer> </template>4. Teleport
React의 Portals(포털)과 유사한 기능으로, 모달이나 알림 등과 같이 특정 컴포넌트가 부모에 상속되어 있으면서도 렌더링되는 위치는 제 2의 루트(영역)인게 유리한 경우 Teleport 기능이 유용하다.
이를 통해, 기존에 CSS로 조정하거나 인위적으로 엘리먼트를 주입하던 방식에서, <teleport> 태그 내부의 HTML 요소를 특정 태그로 옮겨 렌더링할 수 있게 되었다.
// Modal.vue <teleport to="#deleteModal"> <Modal v-show="showModal" @delete="deleteTodo" @close="closeModal"></Modal> </teleport>위 예시와 같이, 다른 곳에 렌더링할 요소를 <teleport> 태그로 감싸고, to 속성에 렌더링할 위치의 id(혹은 class)명을 설정한다.
// index.html <body> <div id="app"></div> <div id="deleteModal"></div> </body>
다음과 같이, Teleport의 타겟이었던 #deleteModal 내에 엘리먼트가 렌더링되는 걸 볼 수 있다.
5. Suspense
<Suspense> 컴포넌트 역시 React에서 지원하는 컴포넌트의 일종이다.
컴포넌트 내 비동기 호출이 종료될 때까지 템플릿 내 fallback(대체)으로 노출할 구문, 그리고 에러가 발생했을 때 노출할 구문 등을 설정하기 위한 기능이다.
<template> <div v-if="error"> // error report... </div> <Suspense v-else> <template #default> <UserProfile /> </template> <template #fallback> <div>Loading...</div> </template> </Suspense> </template> <script> import { onErrorCaptured } from 'vue' setup() { const error = ref(null) onErrorCaptured(e => { error.value = e return true }) return { error } } </script>이처럼, <Suspense> 컴포넌트로 #default(기본 노출 엘리먼트), #fallback(대체 노출 엘리먼트) 를 설정할 수 있다.
또한, onErrorCaptured() 라이프사이클을 통해 error가 발생하는 경우 노출할 엘리먼트 역시 설정하곤 한다.
확실히 Composition API가 Vue3의 가장 큰 변경점이다. 이외엔, Teleport, Suspense 와 같이 부가기능 컴포넌트들이 주를 이루었다.
다만, 가상DOM 트리를 개선한 부분이 기존 Vue2는 어땠고, Vue3는 어떻게 개선되었는지 한번쯤 짚고 넘어갈 것을 권장한다!
📎 출처
- [Vue3] Vue 공식문서 : https://v3.ko.vuejs.org/guide/migration/introduction.html#%E1%84%89%E1%85%B5%E1%84%8C%E1%85%A1%E1%86%A8%E1%84%92%E1%85%A1%E1%84%80%E1%85%B5-2
- [Vue3 변경점] 삼성SDS 기술 블로그 : https://www.samsungsds.com/kr/insights/vue_js_3.html
- [Vue3 변경점] heewon26 님의 블로그 : https://heewon26.tistory.com/258
- [Composition API 사용법] 기억보다 기록을 블로그 : https://kyounghwan01.github.io/blog/Vue/vue3/composition-api/
- [Suspense 컴포넌트] k1005 님의 블로그 : https://k1005.github.io/2021/09/03/Vue-3-%EC%83%88-%EA%B8%B0%EB%8A%A5-%EC%84%9C%EC%8A%A4%ED%8E%9C%EC%8A%A4/
반응형'Front-End(Web) > Vue' 카테고리의 다른 글
[Vue] Composition API (0) 2022.03.12 [Nuxt.js] Nuxt 학습기 - (4) Store, asyncData & fetch (0) 2021.11.30 [Nuxt.js] Nuxt 학습기 - (3) Views, Routing, Middleware & Validate (0) 2021.11.29 [Nuxt.js] Nuxt 학습기 - (2) LifeCycle & 렌더링 모드 (2) 2021.11.28 [Nuxt.js] Nuxt 학습기 - (1) 개념 및 설치 (0) 2021.11.16