Vue3는 Vue2와 어떤 점이 다를까 | Option API와 Composition API 비교

Vue3

✔️ Vue2와 Vue3의 차이점

- 라이브러리 내부 로직이 타입스크립트 기반으로 재작성되었다.

- 주요 개발 도구의 변경 ( Vetur → Volar)

- 컴포지션 API, Teleport 등 새로운 문법 지원

- 리액티비티 시스템 기반 API 변경

- 공식 문서 변경 : https://vuejs.org/

 

 

✔️ 인스턴스 생성 방식의 차이

Vue2에서 인스턴스 생성 방식

// 1
new Vue({
	el: '#app'
})

// 2
new Vue({
	// 어쩌구
}).$mount('#app')

 

Vue3에서 인스턴스 생성 방식

Vue.createApp({
	//어쩌구
}).mount('#app')

 

 

이 외에도 vue3를 사용하는 많은 이유가 있지만,

결정적인 이유는vue2가 2023년 12월 31일부로 지원이 종료됐기 때문 ^^

지금 당장은 vue2를 사용해도 무방하지만

어짜피 언제가는 업그레이드를 해야할 터 그냥 처음부터 vue3를 하자

---

✔️ 컴포지션 API

컴포지션 API의 특징

- 컴포넌트 코드 재사용성을 높여주는 API

- 옵션을 선언하는 대신 import한 함수를 사용하여 Vue 컴포넌트를 작성할 수 있는 API

- 사실 Vue3 만의 특징은 아니다. (vue2도 가능하긴함)

Vue2의 플러그인 라이브러리에서 Vue3 코어 API 레벨로 올라왔다고 보면 된다. (떡상)

 

컴포지션 API를 사용하는 이유

1. 재사용성

- 컴포저블 함수의 형태로 효율적으로 로직을 재사용한다.

- 옵션 API의 믹스인(로직 재사용 메커니즘)의 단점을 해결한다.

 

💥 기존 Mixins 의 단점

(1) 불분명한 출처의 속성

- 믹스인을 사용할 때 어떤 믹스인에 의해 주입되는지 명확하지 않아서 추적이 어려움.

- 컴포저블에 refs + destructure 패턴을 사용하면 컴포넌트가 속성을 사용할 때 출처를 알 수 있다.

 

(2) 네임스페이스 충돌

- 여러 믹스인이 잠재적으로 동일한 속성 키를 등록하여 충돌을 일으킬 수 있음.

- 컴포저블을 사용하면 분해 할당 문법으로 변수의 이름을 바꿀 수 있다.

 

(3) 암시적 mixins 간 통신

- 서로 상호 작용해야하는 여러 믹스인은 공유 속성 키에 의존해야 하므로 암시적으로 결합이 된다.

- 컴포저블을 사용하면 일반 함수와 마찬가지로 한 컴포저블에서 반환된 값을 다른 컴포저블에 인자로 전달 가능.

 

 

2. 유연한 코드 구성

- 옵션 API를 사용하여 조직화된 코드를 작성하다보면 겁나 복잡해진다.

- 컴포지션API는 관련된 코드를 그룹화하여 논리적으로 이해하기 쉬워진다.

 

 

3. 타입 추론

- 옵션 API는 애초에 타입 추론을 염두하지 않고 설계 되었다

- 클래스 기반의 API 또한 공식 API로서는 위험하다고 한다.

- 반면, 컴포지션 API는 기본적으로 타입 친화적이라 작성된 코드가 타입추론이 가능하다.

 

 

✔️ 옵션 API와 컴포지션 API 비교

<template>
<div>
  <p>{{ message }}</p>
  <button @click="changeMessage">change</button>
</div>
</template>

 

옵션 API를 사용했을 경우

<script>
export default {
    data() {
      return {
        message: 'Hi'
      }
    },
    methods: {
      changeMessage() {
        this.message = 'Hello'
      }
    }
}
</script>

 

컴포지션 API를 사용했을 경우

<script>
    import { ref } from 'vue';

    export default {
        setup() {
            const message = ref('Hello');
            const changeMessage = () => {
            	message.value = 'Hi';
            }
            return { message, changeMessage }
        }
    }
</script>

 

- setup() 은 컴포지션 API를 작성하기 위해 꼭 선언해야하는 옵션

- ref()을 통해 리액티비티(반응성)를 주입

- setup()내에서 데이터에 접근하려면 .value

- setup()에서 반환(return)해야 컴포넌트에서 인식할 수 있다.

 

💥 컴포지션 API 주의

- 가급적이면 컴포넌트의 코드는 파일 자체에 작성한다.

- 너무 크거나 복잡할 때 setup() 활용하는 게 좋음

 

ref 속성

- 뷰의 반응성을 주입하는 API

- 기존 data 속성의 역할을 한다.

- ref는 setup 안에서 선언이 되기 때문에 반환을 해야 같은 인스턴스 내의 다른 로직에 접근이 가능!

- ref의 값을 setup 안에서 다룰 때는 .value를 사용해야한다.

- 템플릿 표현식에서는 .value를 사용하지 않고 그대로 사용할 수 있는데 Vue 내부적으로 템플릿 표현식에 연결해주기 때문이다.

 

 

✔️ 결론 - Composition API를 사용하는 이유

- Options API는 복잡해질 수록 코드가 분산되어있기 때문에 분석하기가 힘들다.

- 반면에 Composition API는 로직이 그룹화되어 있어서 분석하기가 쉽고 유지보수가 용이해진다.

- 또한 Composable 함수의 형태로 로직을 재사용할 수 있으며 기존 Options API의 mixins의 단점을 해결해준다.

 

---

 

참고강의 : https://inf.run/Lnjjt

장기효(캡틴판교) Vue 3 중급 - Composition API 강의 - 인프런