Vue3 #6 [제거된 기능들]

이미지 출처 : Fotis Adamakis Medium

 

Vue3는 현재 총 7편의 시리즈로 구성되어 있습니다.

1. Vue3 #0 [Vue3를 만나다]
2. Vue3 #1 [변경된 기능 1 - 전역 API]
3. Vue3 #2 [변경된 기능 2 - v-model]
4. Vue3 #3 [변경된 기능 3 - v-for와 v-if]
5. Vue3 #4 [새로운 기능 1 - Composition API]
6. Vue3 #5 [새로운 기능 2 - Teleport와 Fragments]
7. Vue3 #6 [제거된 기능들] - (현재 글)

---

 

들어가며

안녕하세요. 이번에는 2.x 버전과 비교하여 제거된 기능은 무엇이 있는지 알아보려고 합니다. 기억해두어야 할 것 같다고 생각되는 3가지 내용을 추려왔습니다.

 

키보드 이벤트를 위한 키코드

키 입력 수식어에 키코드 사용이 불가능해졌습니다.

<!-- 2.x버전 -->
<input @keyup.13="onSubmit" />

3 버전부터는 별칭만 사용할 수 있습니다. 유효한 키 이름은 mdn 레퍼런스를 통하여 확인해 볼 수 있으며 케밥 케이스 형식으로 변환하여 수식어로 사용합니다.

<!-- 3버전 -->
<input @keyup.enter="onSubmit" />

<textarea @keyup.arrow-up="rollUp"></textarea>

 

필터

텍스트 콘텐츠를 특정 포맷 형식으로 변화시켜 표현하는 데에 사용되었던 필터 API가 3 버전에서 제거되었습니다. 대신, 앞으로는 computed 속성이나 methods을 활용하여 구현하는 것을 권장하고 있군요.

 

$on, $once, $off

전역 스토어를 이용하지 않으면서 부모-자식 간 컴포넌트가 아닌 경우에 데이터를 주고받기 위해서 간간이 이벤트 API를 사용해 본 경험이 있을 것입니다. 빈 인스턴스를 생성하여 이벤트 버스로 할당하고 $on 메서드로 리스닝하면 먼 컴포넌트에서도 데이터를 전달받을 수 있었습니다.

// eventBus.js
const eventBus = new Vue();

export default eventBus;

// component.vue
import eventBus from 'eventBus.js';

export default {
  mounted() {
    eventBus.$on('on-submit', () => {
      console.log('event submit');
    });
  }.
  beforeDestroy() {
    eventBus.$off('on-submit');
  }
}

하지만 빈 인스턴스를 통한 데이터 교환은 그다지 추천하지 않는데요, 전역 스토어를 이용하는 등 다른 방법이 존재하고 퍼포먼스에도 안 좋다고 알려져 있기 때문입니다.
어쨌든 3 버전부터는 $on, $off, $once를 포함하는 이벤트 API가 완전히 제거되면서 사용이 불가능해졌습니다. ($emit은 제거되지 않았기 때문에 사용할 수 있습니다.) 따라서 관련 기능을 구현하기 위해서는 라이브러리의 도움을 받아야 합니다.

 

마치며

지금까지 Vue2와 Vue3는 어떤 점이 달라졌는지 몇 가지 알아보았습니다. 살펴본 내용 외에도 많은 부분이 변경되었는데요, 마이그레이션 방법도 많이 어렵지 않아 보였고 기존보다 개발 퍼포먼스적인 측면이나 불편하다고 느껴지는 몇몇 부분들도 개선이 이루어졌기 때문에 진행 중이거나 앞으로 진행하실 프로젝트에서 적극 도입하기에 매우 좋아 보였습니다. 이 글이 누군가에게는 도움이 되었으면 좋겠습니다.

 

참고자료

• 공식 홈페이지

Vue.js - The Progressive JavaScript Framework | Vue.js

 

이 글은 pxd XE Group Blog에서도 보실 수 있습니다.