Option API와 Composition API

이전 글에서는 Composition API로 차트 개발하는 방법을 설명했으면서
이제와서 개념에 대한 글을 작성하는 건 순서가 달라졌다고 보지만, 어쩔 수 없습니다.
원래 인생은 뜻대로 흘러가지 않는겁니다.

 

블로그 아이디어를 강탈하는 장면

 

비교를 하려면 일단 비교 대상에 대해서 잘 알아야 합니다.

그렇기 때문에 비교에 앞서 Option API와 Composition API, 두 가지의 개념에 대해서 먼저 익히도록 합시다.

 

 

Option API
Option API는 Vue 컴포넌트를 구성하는 데 사용되는 객체 기반의 API입니다.
이 API를 사용하면 컴포넌트의 속성, 메소드, 라이프사이클 훅 등을 객체 리터럴 형태로 정의할 수 있습니다.

말이 참 어렵네요.
우선 객체 리터럴이라는 게 뭔지 아시나요?

객체 리터럴이란 객체를 생성하기 위해 사용하는 표기법입니다.
우리는 객체를 만들 때 모르는 사이에 이미 객체 리터럴 형태로 사용하고 있었답니다.
중괄호 ({}) 를 사용하여 객체를 정의하고, 속성-쌍 (key-value) 형태로 프로퍼티를 구성하는 것 말입니다.
아래는 객체 리터럴로 정의된 예제입니다.

 

const person = {
	name: 'Your Name',
	age: 20,
	address: {
		home: '경기도',
		company: '서울특별시'
	},
	hello: function () {
		console.log('world!');
	}
}

 

객체 리터럴에 대해 이해하셨다면, 다시 Option API의 설명으로 돌아옵시다.
Option API를 사용하면 컴포넌트의 속성, 메소드, 라이프사이클 훅을 객체 리터럴 형태로 정의할 수 있다고 했습니다.
감이 오시나요? 여전히 모르시겠다면 Option API를 사용한 간단한 Vue 컴포넌트를 살펴봅시다.

 

const MyComponent = Vue.extend({
	data: function() {
		return {
			message: 'Hello Vue!'
		};
	},
	methods: {
		showMessage: function() {
			console.log(this.message);
		}
	},
	created: function() {
		this.showMessage();
	}
});

 

위의 예제에서,

data 객체는 컴포넌트의 데이터 속성을 정의하고,
methods 객체는 컴포넌트의 메소드를 정의합니다.
created는 Option API에서 사용하는 라이프사이클 중 하나이고요.

어떠신가요?

이제 컴포넌트의 속성, 메소드, 라이프사이클 훅을 객체 리터럴 형태로 정의했다는 말이 무엇인지 아시겠나요?

축하합니다. Option API에 대해 이해하신 겁니다.

 

 

 

Composition API

그럼 이어서 Composition API에 대해 알아보겠습니다.
Composition APi는 Vue3 버전부터 도입된 새로운 API로,역시 Vue 컴포넌트를 구성하는 데에 사용됩니다.
Option API의 단점을 보완하고 개발자가 코드를 구조화하기 쉽게 만들어줍니다.

Option API가 뭔지 방금 막 알았는데, 그 단점을 보완하기 위해 생겼다니, 잘 감이 안오시죠?
위에서 보여드렸던 Option API Vue 컴포넌트를 다시 가져와 살펴봅시다.

 

const MyComponent = Vue.extend({
	data: function() {
		return {
			message: 'Hello Vue!'
		};
	},
	methods: {
		showMessage: function() {
			console.log(this.message);
		}
	},
	created: function() {
		this.showMessage();
	}
});

 

이 컴포넌트는 짧으니까, 코드를 파악하는 데에 많은 시간이 걸리지 않을지도 모릅니다.
그렇지만 한 컴포넌트에서 사용하는 함수가 아주 많고 복잡하다면 어떻게 될까요?

지금도 data, methods, created에 적힌 함수를 읽으며 뭐가 먼저 실행될까 헷갈리기 시작하는데,
만약 그렇게 된다면 코드를 읽는 것이 너무 힘들지 않을까요?

Composition API는 이러한 Option API의 단점을 개선했습니다.
아래는 Composition API를 사용하여 만든 간단한 Vue 컴포넌트입니다.

 

import { reactive, onMounted } from 'vue';

export default {
	setup() {
		const state = reactive({
			message: 'Hello Vue!'
		});

		const showMessage = () => {
			console.log(state.message);
		};

		onMounted(() => {
			showMessage();
		});

		return {
			state,
			showMessage,
		};
	}
};

 

모든 함수를 setup 함수 안에 넣음으로써 더 알아보기 쉬워졌습니다.
한 곳에 몰아넣는다는 점에서, 프레임워크를 사용하지 않고 script 태그 안에 개발할 때와 유사하다고 볼 수 있습니다.
그리고 실제로 Composition API는 이런 식으로도 사용할 수 있습니다.

 

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

const state = reactive({
	message: 'Hello Vue!'
});

const showMessage = () => {
	console.log(state.message);
};

onMounted(() => {
	showMessage();
});
</script>

 

이 글을 작성하면서 알게 된 사실인데,
공식문서에서도 Composition API를 사용하는 경우 <script setup> 방식을 사용하라고 권장하고 있습니다.

공식문서 https://vuejs.org/api/sfc-script-setup.html

 

 

여기까지 따라오셨다면 Option API와 Composition API의 개념에 대해서는 확실하게 이해하신 겁니다.

오늘은 Option API와 Composition API에 대해 알아보았으니,
다음에는 이 둘의 차이에 대해 알아보도록 합시다.