1. Why, ref? Why, reactive?
- View와 ViewModal 사이의 반응형 바인딩 구현
- Vue는 반응형 프로그래밍 모델을 기반
상태의 변화가 자동으로 UI를 업데이트하도록 하는 것
애플리케이션의 상태와 UI 사이의 동기화를 자동으로 관리
ref와 reactive는 뷰(View)와 뷰모델(ViewModel) 사이의 연결고리 역할
Vue.js: 반응형 프로그래밍 모델
반응형 프로그래밍 모델은 애플리케이션의 상태 변화를 자동으로 감지하고, 이러한 변화에 의존하는 다른 부분(주로 UI 컴포넌트)을 자동으로 업데이트하는 프로그래밍 패러다임
2. ref
ref의 작동 원리
- ref는 Vue.js에서 제공하는 함수로, 주어진 값을 반응형 참조 객체로 래핑합니다.
- 이 객체는 .value 속성을 통해 실제 값을 보유합니다.
- ref로 생성된 참조 객체는 Vue의 반응형 시스템에 의해 관리됩니다.
- 이 시스템은 .value 속성에 접근하거나 수정할 때마다 이를 감지합니다.
접근 시: Vue의 반응형 시스템은 해당 참조가 읽힐 때(즉, .value가 접근될 때) 그 접근을 추적합니다. 이는 나중에 의존성이 있는 컴포넌트를 업데이트할 수 있는 기반을 마련합니다.
수정 시: .value 속성의 값이 변경될 때, Vue는 이전에 추적한 의존성을 기반으로 하여 변경 사항을 감지하고, 관련된 컴포넌트의 재렌더링을 트리거합니다.
이 메커니즘을 통해, ref는 Vue 애플리케이션 내에서 데이터의 변화를 실시간으로 감지하고 반응할 수 있게 합니다.
ref의 본질적 목적
- ref의 본질적 목적은 원시 값 또는 복잡한 객체를 반응형 데이터로 관리하여, Vue 컴포넌트의 상태와 UI 사이의 자동 동기화를 달성하는 것입니다.
- 원시 값들(문자열, 숫자, 불리언 등)은 직접적으로 반응형으로 만들 수 없기 때문에, ref는 이러한 값들을 .value 속성을 사용하여 래핑하고 관리함으로써 반응형 시스템의 일부로 통합합니다.
원시 값 관리: ref는 원시 값에 대한 반응형 래퍼를 제공함으로써, 값의 변경을 자동으로 감지하고, 이에 따라 UI를 업데이트할 수 있도록 합니다.
UI와 상태의 동기화: 데이터 상태의 변화가 Vue 컴포넌트의 UI 업데이트를 자동으로 촉발함으로써, 개발자는 데이터 관리와 UI 업데이트 사이의 동기화 로직에 대해 걱정할 필요가 없습니다.
결론적으로, ref의 본질적 목적은 Vue 애플리케이션 개발에서 선언적 UI 프로그래밍을 가능하게 하는 것입니다.
<script setup>
import { ref, reactive } from 'vue'
const data = {a: 1, b: 2, c: 3};
const refData = ref(data);
console.log('origin data', data)
console.log('reactiveData', refData)
console.log('============change original data============')
data.a = 10
console.log('origin data', data)
console.log('reactiveData', refData)
console.log('============change reactive data============')
refData.value.a = 100
console.log('origin data', data)
console.log('reactiveData', refData)
// 원본 객체의 변환
// 반응형 값, 원본 객체 모두 변화(프록시 객체도 원본 값 참조) 하지만 반응형 미동작
const handleOriginalData = () => {
console.log('============change original data============')
data.a += 1
console.log('origin data', data)
console.log('reactiveData', refData)
}
// 반응형 객체의 변환
// 반응형 값, 원본 객체 모두 변화하고 반응형 동작
// template과 script에 대한 양방향 바인딩이 반응형을 통해 동작
const handleReactiveData = () => {
console.log('============change reactive data============')
refData.value.a += 1
console.log('origin data', data)
console.log('reactiveData', refData)
}
</script>
<template>
<h4>{{`original data: ${JSON.stringify(data)}`}}</h4>
<h4>{{ `reactive data: ${JSON.stringify(refData)}` }}</h4>
<input value="original data" type="button" @click="handleOriginalData"/>
<input value="reactive data" type="button" @click="handleReactiveData"/>
</template>3. reactive
reactive의 작동 원리
- reactive는 객체를 받아 이를 반응형으로 만드는 Vue.js의 Composition API 기능입니다.
- 이는 JavaScript의 Proxy 객체를 사용하여 작동합니다.
- Proxy를 통해 객체의 모든 속성 접근, 수정 및 삭제 등의 작업을 감지하고, 이러한 작업이 발생할 때 Vue의 반응형 시스템에 알려 UI가 적절히 업데이트되도록 합니다.
객체 감지: reactive로 만들어진 객체에 접근하거나 수정할 때, 내부적으로 Proxy의 get, set 트랩이 활성화됩니다. 이는 Vue가 해당 객체의 읽기 및 쓰기 작업을 추적할 수 있게 해줍니다.
자동 업데이트: 객체의 속성이 변경되면, reactive는 Vue의 반응형 시스템을 통해 이 변경사항을 감지하고, 해당 변경사항에 의존하는 컴포넌트를 자동으로 재렌더링합니다.
reactive의 본질적 목적
- reactive의 본질적 목적은 객체나 배열과 같은 복잡한 데이터 구조를 전체적으로 반응형으로 만들어, 애플리케이션 상태의 변화가 자동으로 UI에 반영되도록 하는 것입니다.
- 이를 통해 데이터와 UI 사이의 동기화를 쉽고 효율적으로 관리할 수 있습니다.
복잡한 데이터 구조 관리: reactive는 깊은 반응형 변환을 제공하여, 객체 내부의 중첩된 데이터까지 반응형으로 만들 수 있습니다. 이를 통해 개발자는 복잡한 데이터 구조를 쉽게 관리하고, 상태 변화에 따른 UI 업데이트를 자동으로 처리할 수 있습니다.
효율적인 상태 관리: reactive를 사용하면, 애플리케이션의 상태 로직을 더 선언적이고 직관적으로 작성할 수 있습니다. 개발자는 상태 변경에 따른 UI 업데이트 로직을 별도로 구현할 필요 없이, 데이터 상태에 집중할 수 있습니다.
#### <script setup>
import { ref, reactive } from 'vue'
const data = {a: 1, b: 2, c: 3};
const reactiveData = reactive(data);
console.log('origin data', data)
console.log('reactiveData', reactiveData)
console.log('============change original data============')
data.a = 10
console.log('origin data', data)
console.log('reactiveData', reactiveData)
console.log('============change reactive data============')
reactiveData.a = 100
console.log('origin data', data)
console.log('reactiveData', reactiveData)
// 원본 객체의 변환
// 반응형 값, 원본 객체 모두 변화(프록시 객체도 원본 값 참조) 하지만 반응형 미동작
const handleOriginalData = () => {
console.log('============change original data============')
data.a += 1
console.log('origin data', data)
console.log('reactiveData', reactiveData)
}
// 반응형 객체의 변환
// 반응형 값, 원본 객체 모두 변화하고 반응형 동작
// template과 script에 대한 양방향 바인딩이 반응형을 통해 동작
const handleReactiveData = () => {
console.log('============change reactive data============')
reactiveData.a += 1
console.log('origin data', data)
console.log('reactiveData', reactiveData)
}
</script>
<template>
<h4>{{`original data: ${JSON.stringify(data)}`}}</h4>
<h4>{{ `reactive data: ${JSON.stringify(reactiveData)}` }}</h4>
<input value="original data" type="button" @click="handleOriginalData"/>
<input value="reactive data" type="button" @click="handleReactiveData"/>
</template>
4. ref vs. reactive
ref vs. reactive in array
왜 ref에는 .value가 존재하는가?
