Vue3와 Vue2의 차이점: 한눈에 정리하는 핵심 변화

왜 Vue3를 배워야 할까?

Vue.js는 프론트엔드 개발에서 React와 함께 가장 많이 사용되는 자바스크립트 프레임워크 중 하나입니다. Vue2는 많은 프로젝트에서 오랫동안 사용되었지만, 최근에는 Vue3로의 전환이 활발히 이루어지고 있습니다. Vue3는 단순한 버전 업그레이드가 아니라, 성능 개선, 개발 방식 변화, 코드 구조의 유연성 향상 등을 포함한 대규모 리팩터링이라고 할 수 있습니다. 이 글에서는 Vue2를 이미 알고 있는 분들을 대상으로, Vue3에서 새롭게 바뀐 핵심 요소들을 세 가지 주요 카테고리로 나눠 비교 정리해 보겠습니다.

 

1. Composition API vs Options API

Vue2는 data, methods, computed, watch 등을 분리해서 사용하는 Options API 방식이 기본이었습니다.

// Vue2 방식
export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}

 

Vue3에서는 setup() 함수 안에서 모든 로직을 구성하는 Composition API를 도입했습니다. 함수 기반으로 코드 재사용성이 좋아지고, 큰 프로젝트에서 유지보수도 훨씬 쉬워졌습니다.

// Vue3 방식
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    return { count, increment };
  }
}

Options API가 완전히 사라진 건 아니고, Vue3에서도 사용할 수 있지만, 새로운 프로젝트는 Composition API 사용이 권장됩니다.

2. 반응형 시스템의 변화 (Reactivity System)

Vue2의 반응형 시스템은 Object.defineProperty()를 기반으로 구현되어 있어서, 새로운 속성 추가, 배열 조작에서 한계가 있었습니다.

this.user.age = 30; // 반응형이 아님!
Vue.set(this.user, 'age', 30); // 이렇게 써야 반응형

 

Vue3는 Proxy를 기반으로 한 반응형 시스템으로 완전히 개선되어, 객체에 동적으로 속성을 추가해도 자동으로 반응성을 유지합니다.

import { reactive } from 'vue';

const user = reactive({ name: 'Jane' });
user.age = 30; // 반응형 잘 동작!

이 덕분에 코드가 더 간결하고 직관적으로 바뀌었고, Vue 내부의 성능도 대폭 향상되었습니다.

3. 템플릿 문법과 기능 확장

Vue3에서는 템플릿 문법과 기능에서도 여러 개선이 있었습니다.

1) v-model 다중 바인딩 지원
Vue2는 v-model이 하나의 value와 input에만 바인딩됐지만, Vue3는 다중 v-model을 지원하며 이벤트 이름도 자유롭게 설정할 수 있습니다.

<!-- Vue3 -->
<MyInput v-model:title="bookTitle" v-model:price="bookPrice" />

 

2) Fragment 지원 (다중 루트 노드 허용)
Vue2에서는 컴포넌트의 루트 엘리먼트가 반드시 하나여야 했습니다.

<!-- Vue2 - 오류 발생 -->
<div>Header</div>
<div>Footer</div>

 

Vue3에서는 Fragment가 도입되어 불필요한 wrapping div 없이 여러 엘리먼트를 반환할 수 있게 되었습니다.

<!-- Vue3 - OK! -->
<template>
  <div>Header</div>
  <div>Footer</div>
</template>

 

3) 새로운 내장 기능: <Teleport>, <Suspense>

Vue3에서는 <Teleport>로 모달이나 팝업 같은 요소를 DOM의 다른 위치로 쉽게 렌더링할 수 있으며, <Suspense>를 사용하면 비동기 컴포넌트 로딩 상태를 간편히 처리할 수 있습니다.

 

Vue3, 익숙함 속의 혁신

Vue3는 Vue2의 장점을 그대로 유지하면서도, "개발자 경험(Dev Experience)"을 대폭 개선한 버전입니다. Composition API를 도입하면서 코드 관리가 쉬워졌고, 반응형 시스템도 훨씬 직관적으로 바뀌었죠. 또한 템플릿 기능 확장과 성능 개선 덕분에 Vue3는 현대 웹 개발에 더 잘 맞는 프레임워크로 진화했습니다. Vue2를 이미 알고 있다면, Vue3는 금방 적응할 수 있습니다. 이제 Vue3의 핵심 문법들을 하나씩 공부하면서 실무에 적용해 보세요!

다음 글에서는 Composition API의 핵심인 setup() 함수에 대해 자세히 알아보겠습니다.
setup()의 역할, 내부 구조, ref, reactive와의 관계를 실제 예제를 통해 소개할게요!