[Vue] 옵션 기반 API vs Composition API

옵션 기반 API와 Composition API는 Vue.js 애플리케이션을 구성하는 데 사용되는 두 가지 다른 방식입니다. 여기에는 몇 가지 중요한 차이점이 있습니다.

구조적인 차이:

옵션 기반 API

• Vue 2에서 주로 사용되는 방식
• data, methods, computed, watch 등과 같은 옵션을 사용하여 컴포넌트를 정의
• 이러한 옵션들은 컴포넌트 객체의 속성으로 정의됨

Composition API:

• Vue 3에서 도입된 새로운 방식
• 함수 기반 API를 사용하여 컴포넌트의 로직을 정의
• 컴포넌트의 각 로직은 개별적으로 함수로 정의되며, 이러한 함수들은 컴포넌트 내에서 재사용할 수 있습니다.

코드 구성 방식:

옵션 기반 API:

• 컴포넌트 옵션들이 컴포넌트 객체에 직접 정의되므로, 컴포넌트가 커질수록 코드가 길어지고 복잡해질 수 있습니다. 특히 로직의 재사용이 어려울 수 있습니다.

Composition API:

• 각각의 로직을 함수로 분리하여 정의하므로, 관련된 로직을 함께 그룹화하고 재사용할 수 있음 -> 코드의 가독성과 유지 보수성을 향상

Reactivity 관리:

옵션 기반 API:

• Vue 2에서는 data 객체 내의 속성들에 대한 반응성(Reactivity)을 자동으로 관리

Composition API:

• Vue 3의 Composition API는 reactive나 ref와 같은 함수를 사용하여 반응성을 명시적으로 설정해야 합니다.
• 이는 애플리케이션의 반응성을 더 명확하게 이해하고 관리할 수 있도록 합니다.

코드 재사용성:

옵션 기반 API:

• 로직의 재사용이 제한적일 수 있으며, 코드가 커질수록 컴포넌트의 구조가 복잡해질 수 있습니다.

Composition API:

• 함수 기반의 구성 방식을 통해 로직을 더 재사용 가능하게 만들어줍니다.
• 컴포넌트 간에 로직을 쉽게 공유하고 추상화할 수 있습니다.
• Vue 애플리케이션을 더 모듈화하고 유지 보수하기 쉽게 만들어주며, 코드의 가독성과 재사용성을 향상시킵니다.

옵션 기반 API 예제

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increaseCounter">Increase Counter</button>
    <p>Counter: {{ counter }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!',
      counter: 0
    };
  },
  methods: {
    increaseCounter() {
      this.counter++;
    }
  }
};
</script>

Composition API 예제

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increaseCounter">Increase Counter</button>
    <p>Counter: {{ counter }}</p>
  </div>
</template>

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

export default {
  setup() {
    const message = 'Hello, Vue!';
    const counter = ref(0);

    function increaseCounter() {
      counter.value++;
    }

    return { message, counter, increaseCounter };
  }
};
</script>

위의 두 예제는 동일한 기능을 수행하지만, 구현 방식이 다릅니다. 옵션 기반 API에서는 data 객체를 사용하여 상태를 정의하고, methods 옵션을 사용하여 메서드를 정의합니다. 반면에 Composition API에서는 setup 함수 내에서 상태와 메서드를 정의하고, ref 함수를 사용하여 반응성을 설정합니다.

Composition API를 사용한 경우에는 관련된 로직을 함께 그룹화할 수 있으며, 로직의 재사용이 용이해집니다. 또한 코드가 간결하고 가독성이 높아지는 장점이 있습니다.