Notice
Recent Posts
Recent Comments
Link
반응형
이로
vue3 Reactivity API란? 본문
반응형
Reactivity API란?
Reactivity API는 Vue 3에서 제공하는 반응형 상태 관리를 위한 기본 API 세트입니다.
Reactivity API는 상태관리 도구가 아닙니다. 이는 반응형 데이터를 생성하고 관리하기 위한 저수준 API입니다.
Vuex/pinia와 Reactivity API 주요 차이점
- Vuex/Pinia는 전역 상태관리를 위한 패턴과 도구를 제공
- 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
}
}
}
반응형
'컴퓨터 > Vue' 카테고리의 다른 글
Vue3 Composition API / Options API 란? (1) | 2024.12.04 |
---|---|
Vue3 상태관리도구 pinia / vuex / 등.. (1) | 2024.12.02 |
Vue3의 빌드 도구란? 모듈 번들러란? 왜 vite를 사용하는가? (3) | 2024.11.28 |
Vue3, vite 정적, 동적 sitemap , sitemap.xml 생성하기 (0) | 2024.11.25 |
Comments