Front-End(Web)/Vue

[Vue.js] Vue 3 가 도입되면서 달라진 점

ttaeng_99 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/  

반응형