[Vue.js] Options API vs Composition API

Options API

Options API를 사용하여 옵션의 data, methods 및 mounted 같은 객체를 사용하여 컴포넌트의 로직를 정의합니다. 옵션으로 정의된 속성은 컴포넌트 인스턴스를 가리키는 함수 내부의 this에 노출됩니다.

 

[특징]

• 구조화 방식: 컴포넌트는 data, methods, computed, watch, props, lifecycle hooks 등의 옵션으로 나누어 관리됩니다. 각 로직이 어디에 위치하는지 명확하게 구분됩니다.
• 코드 일관성: 상태와 메서드, 계산된 속성 등이 명확한 섹션으로 나누어져 있어 코드를 한눈에 이해하기 쉽습니다.
• 초심자 친화적: Vue.js 초보자나 작은 프로젝트에 적합하며, 구조가 직관적입니다. 각 기능이 정해진 곳에 위치하기 때문에 로직이 한눈에 파악됩니다.
• Vue 2 스타일: Vue 2에서 주로 사용되었으며, Vue 3에서도 지원됩니다. 레거시 코드나 Vue 2 기반 프로젝트와의 호환성에서 유리합니다.

[예시]

export default {
  // data: 컴포넌트에서 사용할 반응형 데이터를 정의
  data() {
    return {
      count: 0,  // 숫자형 상태 값, 초기값은 0
      user: { name: 'John', age: 25 }  // 객체형 상태 값
    };
  },

  // computed: 계산된 속성, 종속된 상태가 변경될 때 자동으로 다시 계산
  computed: {
    userName() {
      return this.user.name;  // user 객체의 name을 반환
    }
  },

  // methods: 컴포넌트에서 사용할 메서드를 정의
  methods: {
    increment() {
      this.count++;  // count 값을 1 증가
    },
    updateUser(newUser) {
      this.user = newUser;  // user 객체를 새로운 객체로 업데이트
    }
  }
};

장점:

• 코드 구조가 미리 정해져 있어 직관적이고 이해하기 쉽습니다.
• 기존 Vue 2 프로젝트와 호환되며, 익숙한 방식으로 사용 가능합니다.

단점:

• 큰 컴포넌트에서는 관련된 로직이 여러 옵션에 흩어질 수 있어, 복잡한 로직을 유지보수하기 어렵습니다.
• 재사용성이 떨어지고, mixins 사용 시 충돌 가능성이 있습니다.

---

Composition API

컴포지션 API를 사용하는 경우, import해서 가져온 API 함수들을 사용하여 컴포넌트의 로직를 정의합니다. SFC에서 컴포지션 API는 일반적으로 <script setup>과 함께 사용됩니다. setup 속성은 Vue가 더 적은 코드 문맥으로 컴포지션 API를 사용하고, 컴파일 시 의도한대로 올바르게 동작할 수 있게 코드를 변환하도록 하는 힌트입니다. 예를 들어 <script setup>에 import 되어 가져온 객체들과 선언된 최상위 변수 및 함수는 템플릿에서 직접 사용할 수 있습니다.

 

[특징]

• 구조화 방식: setup 함수 내에서 컴포넌트의 상태, 메서드, 계산된 속성, 반응성 로직 등을 정의합니다. 필요한 로직을 모아서 자유롭게 구성할 수 있습니다.
• 로직 집중화: 관련된 상태와 로직을 하나의 함수로 묶어 관리하며, 비즈니스 로직과 상태를 함께 처리할 수 있어 가독성이 높아집니다.
• 재사용성: 로직을 함수 단위로 모듈화하여 여러 컴포넌트에서 재사용할 수 있습니다. Composable 함수를 통해 코드의 재사용성과 유연성이 높아집니다.
• Vue 3 전용: Composition API는 Vue 3에서 도입된 기능으로, Vue 3 프로젝트에서 강력한 성능을 발휘합니다.

[예시]

import { ref, computed, watch, onMounted } from 'vue';

export default {
  setup() {
    // ref를 사용하여 반응형 상태 count를 선언
    const count = ref(0);

    // count 값을 증가시키는 함수
    const increment = () => {
      count.value++;
    };

    // count 값을 두 배로 계산하는 computed 속성
    const doubleCount = computed(() => count.value * 2);

    // count 값의 변화를 감지하는 watch 함수
    watch(count, (newVal, oldVal) => {
      console.log(`Count가 ${oldVal}에서 ${newVal}로 변경되었습니다`);
    });

    // 컴포넌트가 마운트된 후에 실행되는 onMounted 라이프사이클 훅
    onMounted(() => {
      console.log('Component has been mounted');
    });

    // template에서 사용할 변수 및 함수 반환
    return { count, increment, doubleCount };
  }
};

장점:

• 관련된 로직을 모아서 집중 관리할 수 있어 코드가 깔끔해지고, 유지보수가 용이합니다.
• 로직을 모듈화하고 재사용할 수 있어 큰 규모의 프로젝트에 적합합니다.
• 상태와 반응성 로직을 더 세밀하게 관리할 수 있습니다.

단점:

• 초보자에게는 함수형 프로그래밍 패턴이 익숙하지 않아 진입 장벽이 있습니다.
• 작은 프로젝트에서 사용하면 오히려 복잡해 보일 수 있습니다.

Options API vs Composition API

---

 - Chat GPT -

항목	Options API	Composition API
구조화 방식	data, methods, computed, watch 등의 옵션 구분	setup 함수에서 모든 로직과 상태를 처리
진입 장벽	초보자 친화적, 직관적 구조	초기에 함수형 프로그래밍을 이해해야 함
코드 가독성	작은 프로젝트에서 가독성이 좋음	복잡한 로직을 한 곳에 모아 관리 가능, 가독성 좋음
로직 재사용	mixins 사용, 충돌 가능성 있음	Composable 함수로 로직 재사용 가능, 충돌 가능성 적음
반응성 관리	기본적인 Vue 반응성 제공	ref, reactive, watchEffect 등을 통한 세밀한 관리 가능
대규모 프로젝트 적합성	관련 로직이 분산되어 복잡한 컴포넌트에서는 불리함	상태 관리와 로직 모듈화로 대규모 프로젝트에 적합

• Options API는 Vue 2에서부터 쓰이던 전통적인 방식이고, 컴포넌트 로직 분리로 직관적이나, 복잡한 컴포넌트에서는 유지보수가 어려워질 수 있습니다.
• Composition API는 상태 관리와 로직을 더 유연하게 구조화할 수 있는 방식으로, 특히 큰 프로젝트나 재사용 가능한 로직을 작성할 때 유리하지만 함수형 프로그래밍 이해가 필요합니다.

 - 참고 - 
https://ko.vuejs.org/guide/introduction.html#api-styles