Vue3에서 애플리케이션을 만들 수 있는 방법은 크게 두 가지가 있습니다. 하나는 Vue2에서 사용해왔던 Options API를 사용하는 방법과 다른 하나는 Vue3에서 새롭게 등장한 Composition API 입니다.

결론적으로 말씀 드리면 Vue2에서는 Options API의 단점을 보완하기 위해 Composition API 등장했으며, Vue3에서는 Composition API 권장하고 있기 때문에 제 수업에서는 Composition API를 기준으로 수업을 진행할 예정입니다.

이번 시간에는 Vue 프레임워크를 처음 경험하신 분들을 위하여 Options API가 어떻게 생겼고 또 Composition API와 어떻게 다른지 또 Composition API란 무엇인지 살펴보도록 하겠습니다.

Options API vs Composition API 비교

OptionsAPI와 Composition API가 코드상으로 어떠게 다른지 간단히 살펴보도록 하겠습니다.

Options API

<template>
	<div>
		<button @click="increment">Counter: {{ counter }}</button>
	</div>
</template>

<script>
export default {
	data() {
		return {
			counter: 0,
		};
	},
	methods: {
		increment() {
			this.counter++;
		},
	},
	mounted() {
		console.log('애플리케이션이 마운트 되었습니다!');
	},
};
</script>

<style lang="scss" scoped></style>

Composition API

<template>
	<div>
		<button>Counter: {{ counter }}</button>
	</div>
</template>

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

export default {
	setup() {
		const counter = ref(0);

		const increment = () => counter.value++;

		onMounted(() => {
			console.log('애플리케이션이 마운트 되었습니다!');
		});

		return {
			counter,
			increment,
		};
	},
};
</script>

<style lang="scss" scoped></style>

• Options API는 data, methods, mounted 와 같은 옵션을 사용합니다.
• Composition API는 반응형 코드를 작성하는 단일 setup 함수가 있습니다.

Composition API란?

Composition API는 옵션(data, methods, ...)을 선언하는 대신 가져온 함수(ref, onMounted, ...)를 사용하여 Vue 컴포넌트를 작성할 수 있는 API 세트를 말합니다.

• Vue3 API Reference

  API Reference | Vue.js

왜 Composition API인가?

Composition API 등장배경

아래 컴포넌트는 Options API로 작성되었습니다.

export default {
	data() {
		return {
			counter: 0,
			books: [],
		};
	},
	methods: {
		increment() {
			this.counter++;
		},
		addBook(title, author) {
      this.books.push({ title, author });
    },
	},
	computed: {
    firstBook() {
      return this.books[0];
    }
  }
	mounted() {
		console.log('애플리케이션이 마운트 되었습니다!');
	},
};

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