[Vue.js] Composition API

Vue3의 큰 변화는 Composition API의 도입이다.

기존 Options API가 가진 구조적 한계를 보완하고, 더 유연하고 재사용 가능한 컴포넌트 구조를 제공한다.

 

1. Composition API란?

Composition API는 Vue 3에서 새롭게 도입된 API 방식으로, setup() 함수 안에서 상태와 로직을 선언적으로 정의할 수 있게 한다.
기존의 data, methods, computed 등 분산된 옵션들을 하나의 함수 안에 모아두므로, 코드의 응집력과 재사용성이 높아진다.

export default {
  setup() {
    // 여기에서 상태와 로직을 모두 정의
  }
}

 

2. Composition API의 핵심 구성 요소

setup() 함수

• 컴포넌트가 생성될 때 가장 먼저 실행되는 함수이다.
• props, context를 인자로 받아 컴포넌트의 초기 설정을 담당한다.

setup(props, context) {
  console.log(props);           // 부모로부터 받은 props
  console.log(context.attrs);  // 바인딩되지 않은 속성
  console.log(context.emit);   // 이벤트 발생 함수
}

 

반응형 상태 만들기

ref(): 원시형 데이터에 사용

import { ref } from 'vue';

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

• .value를 통해 접근
• 템플릿에서는 .value 없이 바로 사용 가능

reactive(): 객체형 데이터에 사용

import { reactive } from 'vue';

const state = reactive({ count: 0 });
console.log(state.count); // 0

 

computed()

import { computed, ref } from 'vue';

const a = ref(1);
const b = ref(2);

const sum = computed(() => a.value + b.value);

• 종속된 값이 변경될 때만 재계산됨 (캐싱됨)

watch()

watch(count, (newVal, oldVal) => {
  console.log(`${oldVal} → ${newVal}`);
});

• 특정 데이터의 변경을 감지하여 사이드 이펙트를 처리할 수 있음

3. Composition API에서의 이벤트 & 슬롯

이벤트 발생: defineEmits()

<script setup>
const emit = defineEmits();
const send = () => emit('myEvent', 'Hello');
</script>

<template>
  <button @click="send">Emit Event</button>
</template>

슬롯 사용: useSlots()

<script setup>
import { useSlots } from 'vue';
const slots = useSlots();
</script>

<template>
  <div><slot /></div>
</template>

 

 

4. 라이프사이클 훅

Composition API에서는 라이프사이클 훅을 함수 형태로 사용한다.

import { onMounted } from 'vue';

onMounted(() => {
  console.log('컴포넌트 마운트됨');
});

• onMounted, onUnmounted, onUpdated 등 사용 가능

 

5. <script setup> 문법

• setup() 함수처럼 동작하지만, return 없이 템플릿과 바로 연결됨.
• 코드량이 줄고, 가독성이 좋아짐.

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

const count = ref(0);
const increment = () => count.value++;
</script>

<template>
  <button @click="increment">Count: {{ count }}</button>
</template>

 

 

6. Composition API + JS 핵심 개념

Object.assign()

• 객체 병합 시 사용되는 표준 메서드

const result = Object.assign({}, { a: 1 }, { b: 2 });
// → { a: 1, b: 2 }

• 얕은 복사만 가능하며, 대상 객체를 직접 변경함.

클로저(Closure)

Vue에서 setup() 내부의 변수가 계속 유지되는 이유는 클로저 덕분이다.

function counter() {
  let count = 0;
  return () => ++count;
}

const myCounter = counter();
myCounter(); // 1
myCounter(); // 2

Vue는 setup() 내 변수들을 클로저 형태로 유지시켜, 상태가 지속되도록 한다.

Proxy 객체

Vue 3의 ref(), reactive()는 내부적으로 Proxy를 사용해 반응형을 구현합니다.

const obj = { name: 'Vue' };
const proxy = new Proxy(obj, {
  get(target, prop) {
    console.log('접근:', prop);
    return target[prop];
  }
});