Vue.js 3에서 새롭게 도입된 컴포지션 API는 기존 옵셔널 API보다 코드를 구성하는 더 유연하고 구조적인 방법을 제공합니다. 이번 글에서는 컴포지션 API의 기본 개념과 장점, 그리고 간단한 예제를 통해 사용 방법을 알아보겠습니다.

컴포지션 API란?

컴포지션 API는 Vue.js 3에서 도입된 새로운 컴포넌트 구성 방식으로, 기능별로 코드를 그룹화하고 재사용하는 데에 중점을 둡니다. 이를 통해 코드의 가독성과 유지보수성을 높일 뿐만 아니라, 코드를 더 선언적으로 만들어줍니다.

기존의 Options API와는 달리 데이터, 계산된 속성, 메소드 등을 유연하게 그룹화하여 로직을 재사용할 수 있도록 도와줍니다.

컴포지션 API의 장점

컴포지션 API를 사용하면 다음과 같은 장점을 얻을 수 있습니다:

• 가독성 향상: 기능을 그룹화하여 로직을 더 명확하게 표현할 수 있습니다.
• 유연성: 복잡한 상태 및 로직을 더 쉽게 다룰 수 있습니다.
• 재사용성: 로직을 더 쉽게 재사용할 수 있으며, 컴포넌트 사이에서 로직을 공유할 수 있습니다.

컴포지션 API 예제

다음은 간단한 컴포지션 API 예제입니다.

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="setMessage">Click me</button>
  </div>
</template>

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

const message = ref('Hello, composition API!');

function setMessage() {
  message.value = 'Button clicked!';
}
</script>

위의 예제에서 ref를 이용해 message를 정의하고, setMessage 함수를 만들어 버튼 클릭 시 메시지를 변경하도록 구성했습니다.

결론

컴포지션 API는 Vue.js 애플리케이션의 코드 구성을 보다 유지보수 가능하고 구조적으로 만들어주는 강력한 도구입니다. 이를 통해 기능별로 코드를 그룹화하고 재사용함으로써 개발자들이 보다 쉽게 코드를 다루고 관리할 수 있게 됩니다.

더 많은 정보를 얻고 싶다면 Vue.js 공식 문서를 참고하세요.