Vue.js에서는 컴포넌트를 정의할 때 Composition API와 Options API 두 가지 방법을 사용할 수 있습니다.

1. Composition API와 Options API 비교

비교 항목 Composition API Options API
코드 구조 setup() 함수 내부에서 로직을 구성 data, methods, computed 등의 옵션을 사용하여 명확한 역할 분리(직관적이고 구조화된 코드)
재사용성 Composition Functions를 활용하여 로직 재사용이 용이 Mixins을 사용하지만, 충돌 문제 발생 가능
타입스크립트 지원 매우 우수 (함수 기반 구조로 타입 적용 용이) 제한적 (Vue 내부에서 자동 추론)
가독성 상태, 로직, 라이프사이클이 한 곳에서 관리되어 일관성 있음. (로직이 하나의 함수 내에서 관리됨) 기능별로 나뉘어져 있어 초보자에게 익숙함
코드 유지보수 복잡한 로직도 Composition Function으로 분리 가능.
(복잡한 로직도 쉽게 관리 가능)		 규모가 커질수록 관리가 어려워질 수 있음
반응형 상태 관리 ref(), reactive() 사용 data()에서 객체 반환
계산된 속성 computed() 사용 computed 옵션 사용
이벤트 및 메서드 setup() 내부에서 메서드 정의 후 반환 methods 옵션에서 정의
라이프사이클 onMounted(), onUpdated() 등 Vue 3에서 제공하는 Composition API 사용 created(), mounted() 등 옵션을 사용
Vue 2 지원 여부 Vue 3에서만 사용 가능 Vue 2 및 Vue 3에서 사용 가능

 

2. Composition API와 Options API 예시

Composition API 사용 예시

Composition API는 setup() 내부에서 ref, reactive, computed 등을 활용하여 상태를 관리합니다.

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

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

    const doubleCount = computed(() => count.value * 2);

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

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

 

아래와 같이 <script setup>을 통해 조금 더 간결하게 소스를 작성 할 수 있습니다.

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

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

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

 

Options API 사용 예시

Options API는 data, methods, computed 등의 옵션을 활용하여 상태를 정의합니다.

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

3. 언제 Composition API를 사용하고, 언제 Options API를 사용 할까?

Composition API

  • 복잡한 상태 관리가 필요한 경우 (예: 여러 개의 computed, watch 활용)
  • 반복되는 로직을 Composition Function으로 재사용하려는 경우
  • TypeScript와 함께 Vue를 개발할 때
  • Vue 3의 최신 기능을 적극 활용하려는 경우

Options API

  • 기존 Vue 2 프로젝트를 유지보수할 때
  • 간단한 컴포넌트를 개발할 때
  • Composition API의 함수형 코드 스타일이 익숙하지 않을 때

4. 정리

Composition API는 확장성과 유지보수가 뛰어나며, Vue 3에서는 추천되는 방식입니다. 하지만, 간단한 컴포넌트나 기존 Vue 2 프로젝트에서는 Options API를 활용하는 것이 더 적절할 수 있습니다.

+ Recent posts

티스토리툴바