📚 Reference

• 공식 문서 1

📜 Chapter

Reactivity (반응성)

ref, reactive

toRefs()

• toRefs()
• toRefs는 반응형 객체(reactive object)의 연결성을 유지하면서 개별 속성들을 ref로 변환해 주는 함수이다.

필요한 이유

• reactive로 만든 객체를 구조 분해 할당(Destructuring)하거나 스프레드 연산자(...)를 사용하면, Vue의 반응형 연결 고리가 끊어져 버린다.

const state = reactive({ count: 0 });

// ❌ 반응성 상실: 이제 'count'는 그냥 숫자 0일 뿐, state.count가 변해도 바뀌지 않는다.
let { count } = state; 

// ✅ 반응성 유지: toRefs를 사용하면 'count'는 'state.count'를 바라보는 'ref'가 된다.
const { count } = toRefs(state);

• toRefs를 사용하면 객체의 각 속성이 .value를 가진 ref 객체가 되어, 원본 객체와 동기화된 상태를 유지한다.