Vuejs3 - 05 반응형 API의 기초

반응형 API

reactive

ref 함수는 잠깐 잊자.

자바스크립트 객체에서 반응형 상태를 생성하기 위해선 reactive() 함수를 사용할 수 있다.

이 때 반환되는 객체를 반응형 객체라고 한다.

<template>
	<div>
		<button v-on:click="state.count++">Click {{ state.count }}</button>
	</div>
</template>

<script>
	import { reactive } from 'vue';
	export default {
		setup() {
			const state = reactive({
				count: 0,
			});

			return {
				state,
			};
		},
	};
</script>

<style></style>

이런식으로 반응형 객체를 사용할 수 있다.

이런 반응형은 객체가 객체를 value를 가지고 있는 깊이가 깊은 객체라 하더라도 잘 동작한다.

String 이나 number, boolean 을 반응형으로 만들고 싶다면?

reactive 안에 Stirng, number 넣으면 반응형으로 동작하지 않음.

오직 객체만 되나봐..

배열도 되기는 한대… 근데 단일 변수는 안됨..

아 reactive 라고 하는 애는 주소를 가지고 있는 애래 그래서 주소를 가지고 그 값을 변화한 것을 그대로 반영할 수 있으나

primitive의 경우에는 주소가 있다기 보다는 그냥 그 값 자체이므로 값이 바뀌는 걸 감지하지 못하는거래

(정확하게 이해를 못했어)

그래서 만약에 정 바꾸고 싶다면 value라는 key 값 안에 값을 넣어서 만드는 거라면 될텐데..

그래서 primitive 데이터에 동작하게 하는게 ref래

ref

원시값 반응형 데이터를 만들 때 사용한다.

number, string, boolean 에 사용한다.

ref(원시형 데이터) 넣으면 됨.

근데 저렇게 만들면 객체를 반환시킴

value 를 반환하게 됨.

결국에 value 만든 객체 안에 참조형태로 반환해주는 거임 그래서 이름도 (ref)

또 script 안에서 사용할 때는 message.value 이렇게 사용해야하고

template 안에서 사용할 때는 unwrapping 이 자동으로 되기 때문에

그냥 변수 자체 {{message}} 이렇게 사용하면 된다고 한다.

<template>
	<div>
		<p>{{ message }}</p>
		<button @click="increment">dd</button>
	</div>
</template>

<script>
	import { ref } from 'vue';
	export default {
		setup() {
			const message = ref('Hello Vue');
			const increment = () => {
				message.value = message.value + '!0';
			};

			return {
				message,
				increment,
			};
		},
	};
</script>

<style></style>

ref 속성을 reactive 객체 안의 속성으로 할당한다면??

const count = ref(0);
const state = reactive({
	count,
});
count.value++;
count.value++;
console.log(count.value);

위와 같이 코딩했을 때,

count.value 로 접근해야함.
staet 안에 있는 count는 state.count 만 쓰면 됨
count 바뀌면 state.count도 바뀜.

ref로 선언한 반응형 상태를 배열에서도 사용해보면?

const message = ref('Hello!');
const arr = reactive([message]);
console.log(arr[0]);

위와 같이 접근하게 되면, 뭐가 많이 찍힘.

그래서 arr[0].value 라고 찍어야 접근할 수 있음.

배열은 객체랑 다름.

아놔 헷갈리게 해놨네…

반응형 상태를 구조분해 할당해보자.

객체의 몇개만 사용하고 싶을 때.

그러나 반응형 속성에서 사용하면 그 속성은 반응형을 잃게 된다.

const book = reactive({
	author: 'Vue Tema',
	year: '2020',
	title: 'Vue 3 guide',
	description: '당신은 지금 이 책을 사요',
	price: '무료',
});

const { author, title } = book;

위와 같이해서 author title을 template에서 렌더링 이 잘되는것은 확인할 수 있다.

그러나 반응형처럼 생길 순 없다.

왜냐 저렇게 구조분해할당을 하면 그냥 일반 변수 하나 만든거나 다름이 없다.

반응성을 잃어버린 것임

다시 반응형을 주고 싶다면… toRefs 사용하면됨.

const { author, title } = toRefs(book);
const { price } = toRef(book);

하나일 때는 toRef. 두개 이상일 때는 toRefs

그러면 다 반응형처럼 동작한다.

반응형에서 속성 가져올 때 사용.

readonly

반응형 객체의 변경을 방지할 수 있음.

const copy = readonly(original)

original은 반응형이라면

copy는 할당할 수 없음.

Reactive Transform 실험적인 단계

$를 붙여서

$refs 로 선언한 변수는 .value 를 안붙여도 되게끔 만들고 있는 중이라 한다.