Composition API vs Option API

Vue.js에서는 Option API가 오랫동안 기본 사용 방식이었지만, Vue 3에서는 Composition API가 도입되며 새로운 방식의 코드 구조화가 가능해짐. 두 접근 방식은 각각의 장단점이 있으며, 상황에 따라 적합한 방식을 선택하는 것이 중요함. 이 글에서는 Option API와 Composition API의 차이점과 사용 시기, 장단점을 정리함.

---

1. Option API

Option API는 Vue 2부터 사용된 전통적인 방식으로, data, methods, computed 등의 옵션을 사용해 컴포넌트를 구성함. 코드가 명확히 구분되어 있어 초보자에게 이해하기 쉬움.

<template>
  <div>
    <p>카운트: {{ count }}</p>
    <button @click="increment">증가</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};
</script>

특징:

• 초보자 친화적: 코드가 data, methods, computed 등으로 명확히 분리됨.
• 명료한 구조: 각 기능을 명확히 구분해서 정의.
• 단점: 여러 기능이 서로 의존할 경우 코드가 복잡해질 수 있음.

---

2. Composition API

Composition API는 Vue 3에서 도입된 새로운 패턴으로, reactive()와 ref() 등을 활용해 상태를 관리하고, 여러 기능을 하나의 setup() 함수에서 조합함. 코드 재사용성과 모듈화에 유리함.

<template>
  <div>
    <p>카운트: {{ count }}</p>
    <button @click="increment">증가</button>
  </div>
</template>

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

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return { count, increment };
  },
};
</script>

특징:

• 유연한 코드 재사용: 여러 기능을 하나의 setup()에서 조합 가능.
• 모듈화: 훨씬 더 모듈화된 코드 작성이 가능하며, 외부 함수로 분리하기 좋음.
• 초보자에겐 생소: 초기에는 복잡하고 어려울 수 있음.

---

비교항목	Option API	Composition API
사용 용이성	쉬운 이해와 접근성	유연하지만 처음엔 복잡하게 느껴질 수 있음
구조화	옵션(data, method 등) 별로 분리	기능별로 모듈화 가능 (setup 내부)
재사용성	코드 재사용이 제한적	외부 함수를 통해 높은 재사용성 제공
Vue2 지원	사용 가능	지원 안 됨
유지보수성	단순 프로젝트에 적합	복잡한 애플리케이션에 더 유리
성능 최적화	기본적인 성능 제공	더 나은 성능 최적화 가능