Options API VS Composition API

서진웅·2024년 1월 31일

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></style>

이번엔 Composition API 코드를 간단하게 살펴보자

	<template>
    	<div>
        	<button v-on:click="increment">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></style>

Composition API란?

Composition API는 VUE3에서 새로 등장한 API로써, 옵션(data, methods,,,)을 선언하는 대신 함수(ref, onMounted)를 사용하여 VUE 컴포넌트를 작성할 수 있는 API 세트를 말한다.

Composition API를 사용하는 이유

좌측(Options API)과 우측(Composition API)는 같은 결과물을 도출하는 VUE 코드이다. 색상으로 연관된 코드를 표시했다.
Options API는 동일한 논리적 관심사를 처리하는 코드가 분산되어 있어 코드 분석이 매우 어렵다. 또 이러한 논리적 관심사 코드를 유틸로 따로 추출하는 경우에도 상당한 시간과 작업이 소요된다.

반면, Composition API는 동일한 논리적 관심사 코드를 그룹화하여 한 덩어리로 작성할 수 있다. 때문에 유지보수가 용이하다. 외부 유틸로 따로 빼낼때도 Options API보다 시간이 덜걸린다.

Composition API 특징

반응형 API
ref(), reactive()와 같은 API를 사용하여 reactive state, computed state, watchers 와같은 것들을 만들 수 있다.
라이프 사이클 훅
onMounted(), onUnmounted()와 같은 API를 사용하여 컴포넌트 라이프 사이클에 접근할 수 있다.
종속성 주입(DI)