Vue에서 Composition API와 Options API의 차이점

Vue 2까지는 Vue에서 구성 요소를 만드는 한 가지 방법이 있었습니다. Vue 3에서는 Composition API라는 새로운 방법론이 도입되었습니다. 이제 Vue에서 컴포넌트를 만들고 싶다면 두 가지 방법이 있습니다. 차이점이 정확히 무엇인지 궁금할 수 있으므로 최신 Composition API가 현재 Options API로 알려진 Vue 2 방법론과 어떻게 다른지 살펴보겠습니다.

Vue에서 컴포지션 API와 옵션 API의 차이점은 무엇인가요?

짧은 대답은 구문입니다. Composition API를 사용하면 Options API에서와 같이 내보낼 수 있는 큰 단일 개체 없이도 구성 요소를 만들 수 있습니다. 예를 들어, Options API로 간단한 카운터 컴포넌트를 만들고 싶다면 아래 코드와 같을 것입니다.

옵션 API

<template>
    <h1>{{ counter }}</h1>
    <button @click="incrCounter">Click Me</button>
</template>
<script>
export default {
    data() {
        return {
            counter: 0
        }
    },
    methods: {
        incrCounter: function() {
            this.counter += 1;
        }
    }
}
</script>

대신 Composition API로 동일한 코드를 작성하려는 경우 다음과 같이 표시됩니다.

구성 API

<template>
    <h1>{{ counter }}</h1>
    <button @click="incrCounter">Click Me</button>
</template>
<script setup>
    import { ref } from 'vue'

    let counter = ref(0);

    const incrCounter = function() {
        counter.value += 1;
    }
</script>

몇 가지 차이점이 있습니다.

ref라는 항목을 가져왔습니다. 이를 통해 반응 변수

를 생성할 수 있습니다.

카운터를 늘리면 counter.value가 개체를 반환하므로 실제로는 ref가 증가합니다.

전체 프로토타입을 사용하지 않고 대신 단일incrCounter 함수

만 사용합니다.

Composition API의 반응성

ref와 함께 객체에 reactive를 사용할 수도 있습니다. 이 두 가지 모두 변수에 반응 기능을 제공하므로 기능을 잃지 않습니다.

Composition API의 이점

보시다시피 컴퍼지션 API는 옵션 API보다 훨씬 능률적이며 훨씬 적은 코드가 필요합니다. 또한 코드를 구획화하는 추가 이점이 있습니다. 두 개의 카운터가 있는 어리석은 예를 생각해 봅시다. 하나의 버튼은 출력을 1 증가시키고 다른 하나는 2를 증가시킵니다. 옵션 API에서 다음과 같이 작성할 수 있습니다.

<template>
    <h1>{{ counter }}, {{ doubleCounter }} </h1>
    <button @click="incrCounter">Click Me</button>
    <button @click="increaseByTwo">Click Me For 2</button>
</template>
<script>
export default {
    data() {
        return {
            counter: 0,
            doubleCounter: 0 
        }
    },
    methods: {
        incrCounter: function() {
            this.counter += 1;
        },
        increaseByTwo: function() {
            this.doubleCounter += 2;
        }
    }
}
</script>

반면 구성 요소 API에서는 다음과 같이 표시될 수 있습니다.

<template>
    <h1>{{ counter }}, {{ doubleCounter }} </h1>
    <button @click="incrCounter">Click Me</button>
    <button @click="increaseByTwo">Click Me For 2</button>
</template>

<script setup>
    import { ref } from 'vue'

    let counter = ref(0);
    const incrCounter = function() {
        counter.value += 1;
    }

    let doubleCounter = ref(0);
    const increaseByTwo = function() {
        doubleCounter.value += 2;
    }
</script>

그 차이는 작지만 흥미로운 점을 발견할 수 있습니다. Composition API에서는 모든 관련 코드가 서로 가깝게 유지되므로 많은 희망을 가질 필요가 없습니다. 아래 이미지에서 유사한 기능을 가진 코드가 같은 색상으로 강조 표시된 것을 볼 수 있습니다.

오른쪽에서 Composition API는 코드를 모두 같은 위치에 유지합니다. 소규모 프로젝트에서는 큰 차이가 없지만 대규모 프로젝트에서는 유지 관리 용이성이 향상됩니다.

Composition API의 기타 이점

믹스인 및 이와 함께 발생하는 이름 충돌과 같은 모든 문제를 대체합니다.

대부분 일반 함수와 변수를 사용하므로 TypeScript에서 복잡한 타이핑이 필요하지 않으므로 더 나은 유형 지원이 제공됩니다.

더 작은 파일 - 앞서 언급했듯이 Composition API에는 더 적은 코드가 필요합니다.

지금 Composition API를 사용해야 하나요?

아니! Options API가 여전히 잘 작동한다면 코드를 Composition API로 전환할 이유가 없습니다. Options API는 아무데도 가지 않으며 대신 Composition API는 Vue 구성 요소를 생성하는 대체 수단을 제공합니다.

경우에 따라 옵션 API가 여전히 더 나은 옵션일 수 있습니다(의도하지 않음).

Composition API가 Options API보다 나은가요?

그 질문에 대한 간단한 대답은 없습니다. 두 방법 모두 장점이 있으며 특정 상황에서 유용할 수 있습니다. 무엇을 사용하기로 결정하든 완전히 괜찮지만 Composition API는 Options API와 함께 가져온 몇 가지 문제를 해결합니다.