[Vue.js] Options API vs Composition API

Vue3 에서 애플리케이션을 만들 수 있는 방법은 크게 2가지가 있습니다.
1️⃣ vue2 에서 사용해왔던 Options API
2️⃣ vue3 에서 새롭게 등장한 Composition API


Vue2에서는 Options API 의 단점을 보완하기 위해 Composition API 가 등장했으며, Vuu3에서는 Composition API 를 권장하고 있다.

 

 

 

 

 

 

Options API vs Composition API 비교

 

Options API

• data, methods, mounted 와 같은 옵션을 사용한다.

Composition API

• 반응형 코드를 작성하는 단일 setup 함수가 있다.
• Compositions API는 옵션(data, methods, mounted ...) 을 선언하는 대신 가져온 함수 ( ref, onMounted ...) 를 사용하여 Vue 컴포넌트를 작성할 수 있는 API 세트를 말한다.
• https://vuejs.org/api/

API Reference | Vue.js

 

 

 

 

⁉️ 왜 Composition API 인가?

위 Options API 코드를 보면 동일한 논리적 관심사 (book, counter) 를 처리하는 코드가 파일의 다른 부분에 분산되어 있어 코드를 분석하기가 매우 힘들다. 만약 코드가 더 복잡하고 길어질 경우 파일을 위아래로 스크롤해야 하기 때문에 더 이해하기 힘든 상황이 온다.

또한, 특정 논리적 관심사 로직을 유틸로 추출하려는 경우 분산되어 있는 코드 조각을 찾아 추출하는데 상당한 작업이 필요하다.

 

Composition API 를 사용하면 동일한 논리적 관심사 코드가 그룹화 되어 코드를 분석하기도 쉽고 유지보수가 용이해진다. 

또한, 논리적 관심사 코드 와 외부 유틸 파일로 추출하기가 쉽다.

 

 

 

코드 재사용성

Composition AP 의 가장 큰 장점은 🔗Composable 함수 의 형태로 로직의 재사용이 가능하다.

Options API의 기본 로직 재사용 메커니즘인 Mixins 의 모든 단점을 해결한다.

 

Coposition API 재사용 기능은 계속해서 증가하는 구성 가능한 유틸리티 모음인 🔗VueUse 와 같은 인상적인 커뮤니티 프로젝트를 탄생시켰다.

또한, 🔗immutable data, 🔗state machines , 🔗RxJS 와 같은 상태 저장 타사 서비스 또는 라이브러리를 Vue 의 반응성 시스템(Reactivity system) 에 쉽게 통합하기 위한 깨끗한 메커니즘 역할을 한다.

 

 

Compositions API 는 Options API 가 가지고 있던 2가지 주요 제한 사항을 해결한다.

• hook 을 사용하여 관련 코드 조각을 함께 그룹화한다.
• Composables 을 사용하면 애플리케이션 전체에서 코드를 매우 쉽게 재사용할 수 있다.

 

 

 

 

 

 

Composition API

📙 반응형 API (Reactivity API)

말 그대로 반응하는 데이터와 관련된 API 세트 라고 보면된다.

ref(),  reactive() 와 같은 API를 사용하여 reactive state(반응 상태), computed state(계산된 상태) , watchers(감시자)  와 같은 것들을 만들 수 있다.

 

📙 라이플 사이클 훅 (Lifecycle Hooks)

예를 들어 onMounted(), onUnmounted() 와 같은 API를 사용하여 프로그래밍 방식으로 컴포넌트 라이프 사이클에 접근할 수 있다.

쉽게 말해 라이프라이클 특정 시점에 이러한 함수로 코드를 삽입 할 수 있다.

 

 

🔗 https://vuejs.org/guide/essentials/lifecycle.html#lifecycle-diagram

 

 

 

 

라이플 사이클

• Vue 인스턴스나 컴포넌트가 생성될 때, 미리 사전에 정의된 몇 단계의 과정을 거치게 되는데 이를 라이프 사이클(Lifecycle) 이라고 한다.
• Vue 인스턴스가 생성된 후 우리 눈에 보여지고, 사라지기까지의 단계를 말한다.

라이플사이클 다이어그램

• Vue 인스턴스는 크게 생성(create) 되고, DOM에 부착(mount)되고, 업데이트(update) 되며, 없어지는(destroy) 4가지 과정을 거치게 된다.
• create ➜ mount ➜ update ➜ destroy

🔗 https://vuejs.org/api/composition-api-lifecycle.html

Composition API: Lifecycle Hooks | Vue.js

 

 

 

📙 종속성 주입 (Dependency Injection)

예를 들어 provied() 와 inject() 는 Reactivity API 를 사용하는 동안 Vue 의 의존성 주입 시스템을 활용할 수 있게 해준다.