Vue에서 컴포넌트를 작성한다면 Options API와 Compotision API중 하나를 선택하게 된다.
각 스타일별 특징과 장단점은 다음과 같다.
Options API
data, methods, mounted 같은 객체를 사용하여 컴포넌트의 로직을 정의하는 방식이다.
옵션으로 정의된 속성은 컴포넌트 인스턴스를 가리키는 함수 내부의 this에 노출된다.
<script>
export default {
// data()에서 반환된 속성들은 반응적인 상태가 되어 `this`에 노출
data() {
return {
count: 0
}
},
// methods는 속성 값을 변경하고 업데이트 할 수 있는 함수
// 템플릿 내에서 이벤트 리스너로 바인딩 될 수 있음
methods: {
increment() {
this.count++
}
},
// 생명주기 훅(Lifecycle hooks) 중 하나인 mounted() 함수는 컴포넌트가 마운트 된 후 호출됨
mounted() {
console.log(`숫자 세기의 초기값은 ${ this.count } 입니다.`)
}
}
</script>
<template>
<button @click="increment">숫자 세기: {{ count }}</button>
</template>
Composition API
Vue3에서 추가된 함수 기반의 API로, 컴포넌트 로직을 유연하게 구성할 수 있도록 하여 코드의 재사용성을 높인다. React를 주로 사용해왔다면 조금은 더 익숙할 스타일이다. import 해서 가져온 API 함수들을 사용하여 컴포넌트의 로직을 정의하는데, SFC(Single File Component)에서 컴포지션 API는 일반적으로 <script setup> 과 함께 사용된다. setup 속성은 보일러플레이트를 줄이며 컴파일시 의도한대로 코드를 변환하게 돕는 hint이다. 템플릿에서<script setup> 에 import 되어 가져온 객체와 선언된 최상위 변수 및 함수를 사용할 수 있다.
<script setup>
import { ref, onMounted } from 'vue'
// ref 함수를 사용하여 반응형 상태를 생성하면 .value 속성이 기본으로 포함된다.
const count = ref(0)
// 속성 값을 변경하고 업데이트 할 수 있는 함수
// 값 변경시 Vue의 반응성 시스템에 의해 자동으로 감지되어 관련된 DOM 업데이트를 트리거한다.
function increment() {
count.value++
}
// 컴포넌트가 마운트 된 후 호출될 생명주기 훅
onMounted(() => {
console.log(`숫자 세기의 초기값은 ${ count.value } 입니다.`)
})
</script>
<template>
<button @click="increment">숫자 세기: {{ count }}</button>
</template>
Options API와 Component API 중 무엇을 쓸까?
Options API는 this와 같은 component instance 개념을 중심으로 하므로 OOP 언어 배경을 가진 user와 class 기반 모델에 익숙한 사람에게 더 잘 맞는다. 반면, Composition API는 함수 범위에서 직접 반응형 변수를 선언하고, 복잡성을 처리하기 위해 여러 함수의 상태를 함께 구성할 수 있기 때문에 Options보다 자유로운 로직 구성으로 재사용성을 향상시킬 수 있다.
공식 문서에서는 빌드 tools를 사용하지 않거나 낮은 복잡도의 서비스를 개발하고자 한다면 Options API를, Full Applications를 개발하고자 한다면 Compositions API와 SFC를 활용하는 것을 추천하고 있다.
