인프런 커뮤니티 질문&답변

reactive({}), reactive([])가 아닌
일반 객체와 배열에 ref 타입 속성을 사용하더라도

reactive 객체에 담아서 사용할 때와 .value unwrapping 여부 외에는 동일하게 동작하는 것 같은데 맞게 이해한걸까요??

ref를 쓸 떄 반드시 reactive와 함께 써야하는지 궁금합니다(코드 상 편의를 제외한 이유)

export default {
	setup() {
		// ################일반 객체에 ref#######################
		// ref => {}
		const count2 = ref(0);
		const state2 = {
			count2,
		};
		count2.value += 1;
		count2.value += 1;
		count2.value += 1;

		// console.log(count2);
		// console.log(state2.count2.value);
		// console.log(state2.count2);

		// ################Reactive 객체에 ref#######################
		// ref => Object
		const count = ref(0);
		const state = reactive({
			count,
		});
		count.value += 1;
		count.value += 1;
		count.value += 1;

		// console.log(count);
		// console.log(state.count.value); // undefined, 객체 안에 ref가 들어갈 경우 .value를 자동으로 까서 반환해준다.
		// console.log(state.count);

		// ################일반 배열에 ref#######################'
		// ref => array
		const message2 = ref('Hello');
		const arr2 = [message2];
		console.log(arr2[0]);
		console.log(arr2[0].value);

		// ################Reactive 배열에 ref#######################'
		// ref => array
		const message = ref('Hello');
		const arr = reactive([message]);
		console.log(arr[0]);
		console.log(arr[0].value);

		const incrementCount = () => {
			count.value += 1;
			count2.value += 1;
			console.log(count, state.count.value);
			console.log(count2, state2.count2.value);
		};
		const changeText = () => {
			message.value += '!';
			message2.value += '!';
			console.log(arr);
			console.log(arr2);
		};
		return {
			incrementCount,
			changeText,
			state,
			state2,
			count,
			count2,
		};
	},
};