zzou

Vue 3 Composition API 가이드

https://ko.vuejs.org/guide/extras/composition-api-faq

Vue 3 Composition API는 Vue.js의 새로운 기능 중 하나로, Vue 3에서 도입된 반응적이고 재사용 가능한 코드를 작성하기 위한 새로운 방식이다.

이 API는 Vue.js 애플리케이션을 개발하는 방식을 변화시키고, 코드의 가독성과 유지보수성을 향상시키는데 중점을 두고 있다.

Composition API 소개

Vue 3 Composition API는 이전에 사용되던 Options API와는 다르게 컴포넌트의 관심사를 로직에 따라 그룹화하는 방식을 채택한다.

이는 더 작고 관리하기 쉬운 컴포넌트를 작성할 수 있도록 도와준다.

Composition API는 다음과 같은 장점

코드 재사용성 증가 – 로직을 단일 기능 단위로 분리하여 재사용하기 쉽다.

가독성 향상 – 관련된 코드를 함께 그룹화하여 이해하기 쉽다.

컴포넌트 로직 분리 – 컴포넌트가 단순하고 가볍게 유지되도록 도와줌.

TypeScript와의 통합 – Composition API는 TypeScript와 함께 사용하기에 더 적합한 구조를 제공.

기본 구조

Composition API는 setup() 함수를 사용하여 컴포넌트의 로직을 정의한다. 이 함수 내에서 reactive 상태, 메소드, 계산된 속성 등을 정의할 수 있다.

import { ref, computed } from 'vue';

export default {
  setup() {
    // 반응적 상태 정의
    const count = ref(0);

    // 메소드 정의
    function increment() {
      count.value++;
    }

    // 계산된 속성 정의
    const doubledCount = computed(() => count.value * 2);

    // setup() 함수에서 반환하는 객체
    return {
      count,
      increment,
      doubledCount
    };
  }
};

사용 예제

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

<script>
import useCounter from './useCounter';

export default {
  setup() {
    // useCounter에서 정의한 로직을 가져옴
    const { count, increment, doubledCount } = useCounter();

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

종합

Vue 3 Composition API는 Vue.js 애플리케이션 개발을 좀 더 모듈화하고 유연하게 만드는 도구이다.

이 API를 사용하면 코드의 가독성과 유지보수성을 향상시킬 수 있으며, 로직을 재사용 가능한 단위로 구성하여 개발 생산성을 향상시킬 수 있다.