投稿した質問数 3

2

안녕하세요 :)

질문) ref함수로 바인딩된 fontSize 크기를 조절하면 computed와 같이 조절이 될 줄 알았으나 조절이 안되는 것을 확인했습니다.

답변) reactive 함수에 값을 전달시 이 값은 초기값으로 사용됩니다.

const object = reactive({
    fontSize: '14px'
});
// object 반응형 상태에 fontSize 프로퍼티에 단순히 14px 문자열 초기값을 할당함.

아래 코드도 마찬가지로 object 반응형 상태에 object.fontSize 속성에 단순히 14px 문자열 초기값을 할당한 것일 뿐 ref 함수로 선언된 fontSize가 변경 되더라도 object.fontSize는 반응하지 않습니다.

const fontSize = ref(14);
const object = reactive({
    fontSize: fontSize.value + 'px', // 단순히 '14px' 초기값 할당한 것
});

하지만 computed 속성은 함수(콜백함수)내의 반응형 상태가 변경되면 값이 다시 계산되기 때문에 값이 반응하는 것을 확인할 수 있습니다.

const fontSize = ref(14);
const object = computed(() => ({
    fontSize: fontSize.value + 'px',
});
// computed(콜백함수), 콜백함수 내의 반응형 상태가 변경되면 object 값이 다시 계산됩니다.

만약 해당 부분이 헷갈리신다면 [Computed] 해당 강의를 한 번더 보시는 것을 권장드립니다.

(이 답변이면 질문에 대답이 되겠죠? 😄)

감사합니다 🙂