const { expiredAt } = toRefs(reactive({ expiredAt: ref(null) }));
const { clientId } = toRefs(reactive({ clientId: ref(null) }));
바뀌는 값
이라고 생각했다.객체로 이루어진 데이터 중 1개
라고 생각했다.자동
으로 컴포넌트의 DOM을 변경하는 것자동으로 DOM을 변경하는게 어떻게 가능할까?
전제조건: 자바스크립트의 프록시와 getter, setter
cf) Proxy란? 다른 객체에 대해 수행되는 기본 작업을 수정하고 사용자 정의할 수 있는 객체 생성을 허용하는 기능
Proxy란? Proxy의 역할을 직역하자면 '대리자'라고 할 수 있는데, 이때 한정적인 무언가만을 대리하는 것이 아닌 그냥 무엇이든 대리할 수 있는 역할을 하는 말그대로 대리자임
반응형 상태의 객체를 Proxy 객체로 만들어서 값이 바뀌는 동작이 발생하는 경우에는 set()이 호출, set()은 DOM을 업데이트하게 함
정.리.하.자.면
Proxy를 통해 대상 객체의 set함수를 Vue에서 만든 반응형 handler로 교체해주는 작업
.value
속성을 가지는 객체를 리턴그러면 ref만 있으면 되지 않나😨? 어차피 ref를 쓰면 객체, 배열 다 되지 않냐는 말이지!
아차차! 인자의 타입만 차이점이 아니었음
<script setup>
import { ref, reactive } from 'vue'
const refState = ref({ count: 0 });
const reactiveState = reactive({ count: 0 });
function refPlus() {
refState.value.count++;
}
function reactivePlus() {
reactive.count++;
}
.value
속성을 붙이지 않아도 됨! 바로 접근이 가능해짐toRefs()는 객체의 속성을 하나씩 분리 -> ref로 만듦
reactive의 모든 프로퍼티에 대해 toRef를 적용해 반환
cf) toRef? 단일 reactive객체 프로퍼티를 ref로!
반응성을 가진 객체를 받아 해당 객체의 속성들을 반응성을 가진 개별적인 ref로 변환
구조분해할당에서의 toRefs
// reactive로 구조분해 할당 하는 경우
import { reactive } from 'vue';
const { count } = reactive({
count: 0
});
console.log(count);
count는 더이상 리액티브 하지 않음!(구조분해가 반응성 시스템을 깨뜨림) 사실 이 문제를 해결하기 위해 toRefs가 두둥 등장!
cf) 구조분해 할당이란? 배열이나 객체에서 속성을 추출하여 보다 간결한 방식으로 변수에 할당할 수 있는 구분
// 1. 간결하고 가독성이 좋다 & 반복적인 코드를 방지
const closet = { category: 'shirts', color: 'red' };
// 구조분해 할당이 없는 경우 객체에 접근하는 방법
const category = closet.category;
const color = closet.color;
// 구조분해 할당을 하는 경우
const { category, color } = closet;
// 2. 유연성: 필요한 속성이나 요소만 선택하고 나머지는 버릴 수 있음
const closet = { category: 'shirts', color: 'red', price:20000 };
const { category, price } = closet;
그러니깐 사실상 일반적으로는 이런식으로 쓰이면 쓰임이 맞다고 볼 여지가 어느 정도 있는 편(나 자신과 진짜 최대한 타협했을 경우임)
const toRefObject = reactive({
expiredAt: null,
clientId: null
});
const {expiredAt, clientId} = toRefs(toRefObject);
const expiredAt = ref('null');
const clientId = ref('null');
이쯤에서 다시 한 번 나의 문제 코드는..... 그래도 해석을 해보자면
const { expiredAt } = toRefs(reactive({ expiredAt: ref(null) }));
const { clientId } = toRefs(reactive({ expiredAt: ref(null) }));
첫 번째. '일단 되니깐 끝'이라는 생각으로 끝내면 안 된다.
두 번째. 성능에 관해서도 관심을 갖자.