Composition API의 상태 관리

Reactivity API를 통한 상태 관리

여러 컴포넌트에서 공유해야 하는 상태가 있는 경우 reactive()를 사용하여 반응형 객체를 만든 다음 여러 컴포넌트에서 가져올 수 있다.

// store.js
import { reactive } from 'vue'

export const store = reactive({
  count: 0
})

<!-- ComponentA.vue -->
<script setup>
import { store } from './store.js'
</script>

<template>
	<div>From A: </div>
</template>

<!-- ComponentB.vue -->
<script setup>
import { store } from './store.js'
</script>

<template>
	<div>From B: </div>
</template>

store 객체가 변경 될 때마다 <ComponentA>와 <ComponentB>의 View가 자동으로 업데이트된다. 하지만 이러한 코드는 store를 가져오는 모든 컴포넌트가 원하는 대로 변경할 수 있음을 의미하여, 부수적인 오류를 낼 수 있다.

<template>
  <button @click="store.count++">
    Component B: 
  </button>
</template>

컴포넌트에 의해 임의로 변경될 수 있는 전역 상태 관리는 장기적으로 유지하기 쉽지 않다. 상태를 변경하는 로직이 상태 자체처럼 중앙 집중화되도록 하려면 작업의 의도를 나타내는 이름으로 store 객체에 메소드화 하여 정의하는 것이 좋다.

// store.js
import { reactive } from 'vue'

export const store = reactive({
  count: 0,
  increment() {
    this.count++
  }
})

<button @click="store.increment()">
	Component B: 
</button>

위 예제에서는 단일 reactive() 객체를 저장소로 사용하고 있지만 ref() 또는 computed()와 같은 다른 Reactivity APIs를 사용하여 생산된 반응형 state를 공유하거나 Composable 함수에서 전역 상태를 반환 할 수도 있다.

import { ref } from 'vue'

// 모듈 범위에서 생성된 전역 상태
const globalCount = ref(1)

export function useCount() {
  // 컴포넌트 별로 생성된 로컬 상태
  const localCount = ref(1)

  return {
    globalCount,
    localCount
  }
}

이처럼 반응형 상태 관리 시스템이 컴포넌트 모델과 분리되어 있기 때문에 Vue를 매우 유연하게 사용할 수 있다.