Composition API

1. Composition API란?

Composition API는 Vue 3에서 도입된 새로운 코드 작성 패턴으로, 기능별로 코드 재사용과 모듈화를 쉽게 할 수 있도록 설계되었음. 기존의 Option API와 달리 setup() 함수 내에서 모든 로직을 정의하며, 여러 상태와 메서드를 하나로 묶어 유연하게 관리할 수 있음.

 

2. Composition API의 주요 특징

• 유연성: 여러 기능을 setup() 안에 함께 정의할 수 있어 복잡한 상태 관리에 유리함.
• 모듈화: 외부 함수나 파일로 쉽게 분리해 코드 재사용성을 극대화할 수 있음.
• 타입스크립트 친화적: 타입스크립트를 더 잘 지원하여 정적 타입 검사와의 호환성이 좋음.
• Vue 3 전용: Composition API는 Vue 3에서만 사용 가능함.

3. Composition API 기본 구조

<template>
  <div>
    <p>카운트: {{ count }}</p>
    <button @click="increment">증가</button>
  </div>
</template>

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

export default {
  setup() {
    const count = ref(0);

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

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

 

• ref(): 반응형 변수 생성.
• setup(): 컴포넌트가 생성될 때 호출되며, 데이터와 메서드를 정의함.
• return: 템플릿에서 사용할 변수와 메서드를 반환.

4. 주요 API와 사용법

1) ref() - 기본적인 반응형 데이터 생성

const count = ref(0);
console.log(count.value);  // 0
count.value++;

 

• ref()는 기본 데이터 타입(숫자, 문자열 등)을 반응형으로 만듦.
• 접근할 때는 **.value**를 사용해야 함.

2) reactive() - 객체와 배열의 반응성 생성

import { reactive } from 'vue';

const state = reactive({
  name: '홍길동',
  age: 30,
});

state.age++;
console.log(state.age);  // 31

 

• reactive()는 객체나 배열을 반응형으로 관리할 때 사용함.
• .value 없이 직접 접근이 가능함.

3) watch() - 데이터 변화 감지

import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newVal, oldVal) => {
  console.log(`변경: ${oldVal} -> ${newVal}`);
});

• watch()는 특정 데이터의 변화를 감지해 콜백 함수를 실행함.

4) computed() - 계산된 속성 생성

import { ref, computed } from 'vue';

const price = ref(100);
const quantity = ref(2);

const total = computed(() => price.value * quantity.value);
console.log(total.value);  // 200

 

• computed()는 다른 데이터에 의존하는 값을 자동으로 계산하고, 캐싱함.