Vue2가 공식적으로 종료되면서 새로 진행하는 프로젝트는 Vue3로 진행하고 있다.
그래서 Vue2와 Vue3의 특징, 차이점을 정리해본다.
1. Fragments
Fragments란 다중 루트 노드 컴포넌트를 의미한다.
Vue2에서는 단일 루트 노드만을 지원했기 때문에 template안에 div로 한 번 더 감싸주는 태그가 필수였다.
<template>
<div>
<header></header>
<main></main>
<footer></footer>
</div>
</template>하지만 Vue3 에서는 다중 루트 노드인 Framents를 지원하므로 div로 감싸주지 않아도 된다.
<template>
<header></header>
<main></main>
<footer></footer>
</template>2. Emits 옵션
Vue2에서는 Emit을 별도로 정의하지 않고 그냥 사용할 수 있었다.
하지만 Vue3에서는 Emit을 정의하고 사용하여야 한다.
<script setup>
const emits = defineEmits(['test1','test2']);
</script>3. Composition API
Vue3의 가장 큰 특징이라고 할 수 있는 Composition API 가 도입되었다.
Composition API는 컴포넌트의 로직을 유연하게 구성할 수 있도록 하는 함수 기반의 API이다.
위의 사진에서 볼 수 있듯이 Vue2(Options API)에서는 컴포넌트의 규모가 커지고 로직이 복잡해질수록 하나의 기능에 관련된 코드들이 이곳저곳 흩어지게 된다.
하지만 Composition API를 사용하면 관련있는 로직끼리 묶어서 개발하기 때문에 컴포넌트를 보다 구조화하고 재사용성을 향상시킬 수 있다.
4. 라이프 사이클
Vue3에서의 라이프 사이클 훅이 위의 사진처럼 변화되었는데, beforeCreate 와 created 는 setup()함수 내에서 처리할 수 있기 때문에 필요하지 않게 되었다.
5. Teleport
모달이나 알림 등과 같이 특정 컴포넌트가 부모에 상속되어 있으면서도 렌더링되는 위치는 다른 영역일 경우 Teleport 기능이 유용하다.
이를 통해, 기존에 CSS로 조정하거나 인위적으로 엘리먼트를 주입하던 방식에서, teleport 태그 내부의 HTML 요소를 특정 태그로 옮겨 렌더링할 수 있게 되었다.
<teleport to="#modelArea">
<Modal v-show="showModal"></Modal>
</teleport>위의 소스처럼 다른 위치에 렌더링할 요소를 teleport 태그로 감싸고 to 속성에 렌더링 할 위치의 id나 class명을 설정한다.
<body>
<div id="app"></div>
<div id="modalArea"></div>
</body>이렇게 써주면 Teleport의 타겟이었던 modalArea 내에 엘리먼트가 렌더링된다.
6. 성능 향상
Vue3는 Vue2에 비해 성능이 향상 되었는데 가벼워진 런타임과 컴파일러 덕분에 더 빠른 성능을 제공한다. 또한 타입스크립트와의 더욱 강력한 통합과 지원으로 개발자의 경험이 향상되었다.
Vue3에서 가장 크게 달라진 점은 아무래도 Composition API를 꼽을 수 있을 것 같다.
Composition API를 사용해보니 관련 로직을 모아서 볼 수 있다는 점에서 확실히 Options API보다 편한 것을 느꼈다.
장기적인 유지보수 관점에서 볼 때 Vue2로 되어있는 기존 프로젝트들도 여유가 된다면 Vue3으로 마이그레이션하는 작업을 진행하는게 좋을 것 같다.
