vue3 Reactivity API란?

Reactivity API란?

Reactivity API는 Vue 3에서 제공하는 반응형 상태 관리를 위한 기본 API 세트입니다.

Reactivity API는 상태관리 도구가 아닙니다. 이는 반응형 데이터를 생성하고 관리하기 위한 저수준 API입니다.

Vuex/pinia와 Reactivity API 주요 차이점

1. Vuex/Pinia는 전역 상태관리를 위한 패턴과 도구를 제공
2. Reactivity API는 컴포넌트 내부 또는 컴포지션 함수에서 반응형 데이터를 다루는 기본 기능 제공

Reactivity API로도 상태관리를 구현할 수 있지만, 대규모 애플리케이션에서는 Vuex나 Pinia 사용을 추천합니다. Pinia는 내부적으로 Reactivity API를 사용하여 구현되어 있습니다.

Reactivity API 주요 특징

• 반응형 상태 생성을 위한 ref()와 reactive() 제공
• 계산된 속성을 위한 computed() 제공
• 부작용 처리를 위한 watchEffect()와 watch() 제공
• 독립적으로 사용 가능한 모듈형 API

장점

• Composition API와 완벽한 통합
• TypeScript 지원 우수
• 더 세밀한 반응성 제어 가능
• 번들 크기 최적화 (tree-shaking 지원)

단점

• ref 값 접근시 .value 사용 필요
• reactive 객체의 구조분해할당시 반응성 손실
• 학습곡선이 있음

추천 사용 케이스

• 대규모 애플리케이션
• 재사용 가능한 로직 구현
• TypeScript 프로젝트
• Composition API 기반 개발

import { ref, reactive, computed, watch, watchEffect } from 'vue'

export default {
  setup() {
    // ref 예제
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)

    // reactive 예제
    const user = reactive({
      name: 'John',
      age: 25,
      address: {
        city: 'Seoul',
        country: 'Korea'
      }
    })

    // watch 예제
    watch(count, (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`)
    })

    // watchEffect 예제
    watchEffect(() => {
      console.log(`Current count is: ${count.value}`)
      console.log(`User name is: ${user.name}`)
    })

    // 메서드
    const increment = () => {
      count.value++
    }

    const updateUserInfo = () => {
      user.age++
      user.address.city = 'Busan'
    }

    // 구조분해할당 시 주의사항
    const { age } = user // 반응성 손실
    const userAge = computed(() => user.age) // 반응성 유지

    // readonly로 읽기 전용 객체 생성
    const readonlyUser = readonly(user)

    return {
      count,
      doubleCount,
      user,
      increment,
      updateUserInfo,
      userAge
    }
  }
}