[Vue.js] Vue Composition API란 무엇인가?

Vue Composition API란 무엇인가?

Composition API는 Vue 3에서 공식적으로 도입된 새로운 컴포넌트 작성 방식이다. 기존의 Options API 방식이 아닌, setup() 함수 내에서 reactive state, computed, lifecycle 등을 선언하고 조작할 수 있도록 한다.

Composition API는 코드의 응집도를 높이고, 기능별로 관련된 로직을 하나의 함수 블록 안에 묶을 수 있기 때문에, 규모가 큰 애플리케이션에서도 가독성과 유지보수 측면에서 유리한 구조를 제공한다.

Vue 2에서의 사용

Vue 2에서도 Composition API를 사용할 수 있다. 다만 별도의 플러그인 설치가 필요하다. 다음과 같이 패키지를 추가하면 된다.

npm install @vue/composition-api

이후 Vue.use()를 통해 전역 등록한 뒤, Vue 3에서와 유사한 방식으로 Composition API를 사용할 수 있다.

Options API와의 비교

기존 Options API는 data, methods, computed 등 기능 단위로 코드를 분리하여 작성한다. 아래는 Options API 기반의 간단한 예제다.

export default {
  data() {
    return {
      count: 0
    };
  },
  computed: {
    double() {
      return this.count * 2;
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

반면, Composition API는 관련 로직을 기능별로 묶을 수 있다. 다음은 동일한 기능을 Composition API로 재작성한 예시다.

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const double = computed(() => count.value * 2);
    const increment = () => {
      count.value++;
    };

    return {
      count,
      double,
      increment
    };
  }
};

Composition API는 위처럼 상태와 로직을 하나의 컨텍스트로 묶어, 유지보수성과 재사용성을 크게 향상시킨다. 특히, 복잡한 컴포넌트 또는 상태 분기가 많은 대규모 프로젝트에서는 코드 가독성 및 모듈화에 있어서 명확한 이점을 제공한다.

Composition API의 장점

• 기능 기반 코드 구성: 관련된 로직을 하나의 함수 단위로 묶어 구성 가능
• 재사용성 강화: 로직을 별도의 훅(useXXX) 형태로 분리하여 재사용 가능
• TypeScript 호환성 우수: 명시적인 타입 정의 및 추론이 용이
• 가독성 향상: 특히 대형 컴포넌트에서 관련 기능을 한 눈에 파악 가능

Composition API가 적합한 경우

Composition API는 모든 컴포넌트에 반드시 도입해야 하는 것은 아니다. 다만 다음과 같은 상황에서는 도입을 적극 고려해볼 수 있다.

• 컴포넌트의 상태(state)나 로직이 복잡한 경우
• 다수의 공통 기능을 여러 컴포넌트에서 재사용해야 하는 경우
• Composition 기반 라이브러리(VueUse 등)를 사용하는 경우
• TypeScript를 사용하는 프로젝트인 경우

마무리

Composition API는 Vue 3를 사용하는 개발자에게 더 큰 유연성과 구조화된 코드 작성을 가능하게 한다. Vue 2에서도 일부 지원되므로, 기존 프로젝트에도 점진적으로 도입해볼 수 있다.

프로젝트의 규모와 복잡도, 팀의 개발 스타일에 따라 적절히 선택하여 사용하는 것이 중요하며, 특히 장기 유지보수가 필요한 서비스라면 Composition 기반으로의 전환은 충분히 고려할 가치가 있다.