Vue Options API와 CompositionAPI 비교하기!

안녕하세요.
오늘은 Vue의 Options API와 CompositionAPI의 특징과 차이점을 정리해 보려고 합니다! Options API는 Vue 2 버전에서 주로 사용하는 디자인 방식이고, Composition API는 Vue 3 버전이 나오면서 2 버전보다 조금 더 유연하고 향상된 방식이라고 보시면 될 것 같아요.
실제로 어떤 차이가 있는지 간단한 예제를 통해서 알아보겠습니다. :)

---

1. Vue 2 - Options API 방식

<template>
    <button @click="clickHandler" :value="value">click</button>
    <select @change="changeHandler">
    </select>
</template>

<!-- vue2 Options API 방식 -->
<script>
export default {
    /**
     * 데이터 설정 & 반환
     */
    data() {
        return {
            value : nl
        }
    },
    
    /**
     * 컴포넌트 Created
     */
    created() {
    },
    
    /**
     * 컴포넌트 Mounted
     */
    mounted() {
    },
    
    /**
     * 컴포넌트 Computed
     */
    computed: {
        value() {
            return '1'
        }
    },
      
    /**
     * 함수
     */
    methods: {
        /**
         * 클릭 이벤트 함수
         */
        clickHandler (e) {
            console.log(e)
        },
        
        /**
         * 변경 이벤트 함수
         */
        changeHandler (e) {
            console.log(e)
        }
    }
}
</script>

먼저 Vue 2 버전의 Options API 방식입니다. 위의 방식은 Vue의 가장 기본이 되는 방식이라고 할 수 있습니다.
보통 Vue를 배우기 시작하신 분이라면 Options API 방식을 많이 보셨을 텐데요. 아직은 Vue 3의 Composition API 방식보다는 안정적인 Options API 방식을 많이 사용하고 있어서 그런 것 같아요! 하지만 머지않아 Composition API 방식을 사용하는 환경이 많아질 것 같습니다 ㅎㅎ

Options API 방식의 가장 큰 특징으로는 data() { return { } } 구문을 통해 현재 작성된 스크립트와 template이 연동이 되는 구조입니다.
그리고 Vue의 생명주기에 필요한 주기 함수들(mounted, created, watch, computed 등)을 상황에 따라 추가해 줘서 사용하는 방식입니다.
Vue 3 버전의 Composition API 방식을 배우기 전에 Options API 방식을 먼저 배워보시는 것을 추천드립니다. :)

---

2. Vue 3 - Composition API 방식 ( setup() )

<template>
    <button @click="clickHandler" :value="value">click</button>
    <select @change="changeHandler">
    </select>
</template>

<!-- vue3 Compositions API 방식 (setup 함수) -->
<script>
import { computed } from '@vue/reactivity'
import { reactive, onMounted } from 'vue'

export default {
    /**
     * 컴포넌트 Created
     */
    setup() {
    
        /**
         * 데이터 설정
         */
        const data = reactive({
            value : computed(() => '1')
        })
        
        /**
         * 컴포넌트 Mounted
         */
        onMounted(() => {
        }) 
        
        /**
         * 클릭 이벤트 함수
         */
        function clickHandler (e) {
            console.log(e)
        }
        
        /**
         * 변경 이벤트 함수
         */
        function changeHandler (e) {
            console.log(e)
        }

        /**
         * 데이터 & 함수 반환
         */
        return {
            ...data,
            clickHandler,
            changeHandler,
        }
    },
}
</script>

Vue 3 버전의 Composition API 방식입니다. <templae> 영역은 Options API 방식과 동일합니다.
Options API 방식은 생명주기에 필요한 주기 함수들(mounted, created, watch, computed 등)을 선언하여 사용하다 보면 분리되어 있다는 것을 알 수 있는데, Composition API 방식은 setup()이라는 함수 안에 하나로 움직이기 때문에 분리된 느낌이 아닌 하나로 합쳐진 느낌이 강합니다. 소스 코드 작성을 하다 보면 순차적인 방식으로 하나씩 기능을 작성해 나가면서 마지막에 template과 연동될 변수나 함수들을 모두 return 시켜주는 방식입니다. Vue 2 버전의 Options API 방식과는 완전히 다른 방식입니다.

반응형

---

3. Vue 3 - Composition API 방식 ( <script setup> )

<template>
    <button @click="clickHandler" :value="data.value">click</button>
    <select @change="changeHandler">
    </select>
</template>

<!-- vue3 Compositions API 방식 (<script setup>) -->
/**
 * 컴포넌트 Created
 */
<script setup>
import { computed } from '@vue/reactivity'
import { reactive, onMounted } from 'vue'

/**
 * 데이터 설정
 */
const data = reactive({
    value : computed(() => '1'
})

/**
 * 컴포넌트 Mounted
 */
onMounted(() => {
})

/**
 * 클릭 이벤트 함수
 */
function clickHandler (e) {
    console.log(e)
}

/**
 * 변경 이벤트 함수
 */
function changeHandler (e) {
    console.log(e)
}
</script>

이번엔 Composition API 방식의 조금 다른 방식입니다. setup을 사용하는 것은 동일하지만 setup이 <script>의 속성으로 넣어주는 방식입니다. 이 전의 setup() 방식과 큰 차이점으로는 마지막에 변수나 함수들을 return 시켜줘야 하는데 <script setup> 방식은 return 없이 선언만 하면 되는 구조입니다. 소스상으로 봤을 때 훨씬 간결하고 가독성이 좋은 것 같아요!

현재 Vue의 공식 사이트에서 추천하는 방식이며, 공식 사이트에서 소개한 장점입니다.

---

<script setup> 장점

1. 더 작은 상용구로 더 간결한 코드 작성
2. TypeScript를 사용해 props와 emmited value 선언 가능
3. runtime 성능 향상 (template이 <script setup>과 같은 스코프에 있는 render 함수로 컴파일되므로 프록시가 필요 없다)
4. 더 뛰어난 IDE 타입 추론 가능 (language server가 코드로부터 타입을 추론해 내는데 비용이 덜 듦)

---

마무리

오늘은 이렇게 Vue의 Options API 방식과 Composition API 방식, 그리고 Composition API 방식에서 setup을 script에 추가하는 방식을 정리해 봤습니다. 저는 개인적으로 Vue 2 버전의 방식부터 마지막 방식까지 사용해 본 결과 공식 사이트에서 추천해 준 대로 마지막의 <script setup> 방식이 가장 깔끔하고 생산성이 좋다고 느꼈습니다. 저는 무언가를 배울 때 잘 모를 때는 그냥 공식 사이트에서 추천해 주는 방식을 사용하는 것이 좋다고 생각을 합니다. 사용하다 보면 추천해 주는 데는 다 이유가 있더라고요! ㅎㅎ
저도 아직은 <script setup> 방식을 사용한 지 얼마 되지 않아서 많이 익숙하진 않지만 계속 공부를 하면서 해당 내용을 포스팅해보려고 합니다.


그럼 오늘도 저의 작고 소중한 글을 읽어주셔서 감사합니다!