Option API와 Composition API

Vue에서는 코드를 짜는 방법이 크게 Option API와 Composition API 두 가지 스타일이 있습니다.

• 둘 다 똑같이 Vue에서 컴포넌트를 만들 수 있지만, 생각 방식과 구조가 다릅니다.

1. Option API

전통적인 방식으로, Vue2와 초창기 Vue3에서 가장 많이 쓰입니다.
컴포넌트를 만들 때 data, methods, computed, watch 등 "옵션별로" 객체에 속성을 모아 선언하는 스타일입니다.

예시

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  computed: {
    double() {
      return this.count * 2;
    },
  },
  methods: {
    increment() {
      this.count++;
    },
  },
  mounted() {
    console.log('컴포넌트가 마운트됨!');
  },
};
</script>

• 장점

  • 초심자에게 쉽고 직관적: data, methods, computed 등 역할 분명

  • Vue2/3 모두 지원, 레거시 코드와 호환성 높음

• 단점

  • 기능 분리(복잡한 컴포넌트) 때 코드가 ‘옵션별로 분산’되어 관리하기 불편할 수 있음

  • 동일 기능에 관련된 코드가 서로 먼 option에 흩어질 때가 있음

2. Composition API

Vue3에서 새롭게 등장한 '함수형/조합형' 코드 작성법입니다.
setup() 함수 안에서 reactive state, function, computed, watch 등을 자유롭게 조합하고, 관련된 데이터와 함수를 하나의 묶음(‘composition’)으로 관리할 수 있습니다.

예시 ①

<script setup>
import { ref, computed } from 'vue';

const count = ref(0);
const double = computed(() => count.value * 2);

function increment() {
  count.value++;
}
</script>

예시 ②

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

export default {
  setup() {
    const count = ref(0);
    const double = computed(() => count.value * 2);
    function increment() {
      count.value++;
    }
    return { count, double, increment };
  },
};
</script>

• 장점

  • 관련된 로직을 하나의 함수/블록으로 합쳐서 관리 & 재사용 가능

  • 함수별로 훅처럼 사용할 수 있어서 대규모/복잡한 프로젝트에서 유지보수 용이

  • TypeScript 완전 호환 및 IDE 자동완성, 타입 추론 향상

  • 커스텀 로직(Composable) 만들기 쉬움

• 단점

  • 초보자는 문법이 살짝 복잡하게 느껴질 수 있음

  • 코드를 분리, 커스텀 훅처럼 구상하려는 습관 필요

3. 실제 비교

• Option API 구조

export default {
  data() { return { cnt: 1 } },
  methods: {
    up() { this.cnt++ }
  }
}

• Composition(조합) API 구조

<script setup>
import { ref } from 'vue'
const cnt = ref(1)
function up() { cnt.value++ }
</script>

차이점

• Option API: 코드가 역할(옵션)별로 모여 있음 – 초보자에 쉬움

• Composition API: 관련 로직을 상황별/기능별로 ‘묶어서’ 관리 – 대규모/복잡한 앱에 편리

언제 무엇을 쓰면 좋을까?

Vue3에서는 둘 다 혼용 가능하고, 새로운 트렌드는 Composition API를 메인으로 사용하는 쪽으로 옮겨가는 추세입니다.