Vue3 Composition API는 무엇을 해결 해줄까? OptionsAPI 단점

Vue3에서 가장 중요한 개념인 Composition API 가 새로 추가되었습니다.

 

Vue2에서는Options API 방식을 이용해서 스크립트를 구성하였습니다.

하지만, Options API에 단점과 한계가 있어서 새로운 개념이 도입되었습니다.

 

기존과 완전히 다른 방법은 아니고,

템플릿과 스타일링은 기존과 동일하고 스크립트를 구성하는 방법이 조금 달라졌습니다.

 

물론, 기존 Options API 방법도 Vue3에서 사용이 가능합니다.

 

Options API 방식

  <script>
    new Vue({
      el: '#app',
      data: {
        count: 0
      },
      methods: {
        increment() {
          this.count++;
        },
        decrement() {
          this.count--;
        }
      }
    });
  </script>

 

Options API의 단점

1. Options 속성에 따라서 로직이 분리가 됩니다.

data, method, computed 등 다양한 Options 속성이 있습니다.

컴포넌트 내에는 다양한 기능들이 있지만, 기능들로 분리되지 않고 해당 옵션으로 분리가 됩니다.

흩어진 기능들을 찾고 수정하는 것에 어려움이 있습니다.

2. 기능 재사용이 어렵습니다.

Vue2에서는 mixins를 이용해서 기능을 재사용할 수 있었는데, mixins 도 단점이 있습니다.

• 데이터와 메서드의 출처를 알기가 어렵습니다.
• 여러 개의 mixins를 사용하기 어렵습니다. (ex, 덮어쓰기 등)

이런 단점 때문에 대규모 프로젝트에서는 기능 재사용에 어려움이 있습니다.

Vue Mixin(믹스인) 사용법과 장단점

Compositinon API란? 장점

Composition API에 변경된 부분은

Options API에서 설정하였던, data, method, computed, watch 속성들 setup 메서드로 통합하게 됩니다.

 

setup 메서드로 통합하게 되면,

• 기능 별로 코드를  통합할 수 있습니다.
• 기능을 함수별로 분리하면 재사용에 용이하고 기능별로 걱 데이터가 어디서 오는지 한눈에 파악할 수 있습니다.

  <script>
    const { reactive, createApp } = Vue;

    const app = createApp({
      setup() {
        const state = reactive({
          count: 0
        });

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

        const decrement = () => {
          state.count--;
        };

        return {
          count: state.count,
          increment,
          decrement
        };
      }
    });
  </script>

 

언제 사용하면 좋은지?

기존에 사용하던 Options API가 문제가 있거나, 이제 사용하지 못하는 것은 아닙니다.

중소 규모 프로젝트나, 시나리오에서는 Options API가 더 적합한 경우도 있습니다.

Composition API를 이해하기 위해서는 Options API를 먼저 이해하는 것이 더 쉬울 수도 있습니다.

 

프로젝트 내에서도 동일하게 사용하지 않아도 됩니다.

각 상황에 맞게 적절하게 사용하면 됩니다.

 

Composition API에 대한 자세한 이야기는 다음 포스팅에서 또 작성하겠습니다.

감사합니다.

 

컴포지션 API FAQ | Vue.js