Vue 3 Composition API 완벽 가이드 - Options API와 비교하며 배우는 실전 활용법

Vue 3 Composition API 완벽 가이드 - Options API와 비교하며 배우는 실전 활용법

Vue 3의 가장 큰 변화는 Composition API의 도입이에요. 복잡한 컴포넌트 로직을 더 효율적으로 구성하고 재사용할 수 있게 해주죠.

Composition API가 필요한 이유

Options API는 data, methods, computed 등을 분리해서 작성하다 보니 하나의 기능을 구현할 때 코드가 여기저기 흩어지는 문제가 있었어요. 컴포넌트가 커질수록 관련 로직을 찾기 어려워지고 유지보수가 힘들어집니다.

Composition API는 기능별로 코드를 그룹화할 수 있게 해주고, 로직 재사용을 위한 컴포저블(Composable) 함수 패턴을 쉽게 만들 수 있어요. TypeScript 지원도 훨씬 우수합니다.

setup 함수와 기본 구조

Composition API의 시작점은 setup 함수예요. 컴포넌트가 생성되기 전에 실행되며, 여기서 반응형 데이터와 메서드를 정의하고 반환하면 템플릿에서 사용할 수 있습니다.

<script>
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 }
  }
}
</script>

Vue 3.2부터는 <script setup> 문법을 사용하면 더 간결하게 작성할 수 있어요. return 문이 필요 없고 자동으로 템플릿에 노출됩니다.

ref와 reactive - 반응형 데이터 만들기

Vue 3에서 반응형 데이터를 만드는 두 가지 주요 방법이 있어요.

ref는 원시 타입(string, number, boolean)이나 단일 값에 사용해요. .value로 접근해야 하지만 템플릿에서는 자동으로 언래핑되어 .value 없이 사용할 수 있습니다.

reactive는 객체나 배열 같은 참조 타입에 사용해요. .value 없이 직접 접근하지만, 구조 분해 할당을 하면 반응성을 잃는다는 점을 주의해야 합니다.

<script setup>
import { ref, reactive } from 'vue'

const count = ref(0)
const user = reactive({
  name: '홍길동',
  age: 25
})

// ref는 .value로 접근
count.value++

// reactive는 직접 접근
user.age++
</script>

실무에서는 단일 값은 ref, 객체는 reactive를 사용하는 것이 일반적이에요. 하지만 최근에는 일관성을 위해 모든 경우에 ref를 사용하는 패턴도 많이 사용됩니다.

Composable로 로직 재사용하기

Composition API의 진정한 힘은 로직을 재사용 가능한 함수로 추출할 수 있다는 거예요. 예를 들어 마우스 위치를 추적하는 기능을 여러 컴포넌트에서 사용한다면 이렇게 만들 수 있어요.

// composables/useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)

  const update = (e) => {
    x.value = e.pageX
    y.value = e.pageY
  }

  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

  return { x, y }
}

이제 어떤 컴포넌트에서든 const { x, y } = useMouse()로 간단히 사용할 수 있어요. Mixin이나 HOC보다 훨씬 명확하고 타입 안전성도 뛰어납니다.

주의사항

반응성 손실 주의: reactive 객체를 구조 분해하거나 ref의 .value를 다른 변수에 할당하면 반응성이 사라져요. 이럴 때는 toRefs를 사용하거나 ref로 감싸서 사용하세요.

결론

Composition API는 Vue 3의 핵심 기능으로, 복잡한 로직을 더 체계적으로 관리할 수 있게 해줘요. ref/reactive로 반응형 데이터를 만들고, setup에서 로직을 구성하며, composable 패턴으로 재사용성을 높일 수 있습니다. Options API도 여전히 유효하지만, 새 프로젝트라면 Composition API를 적극 활용해보세요.