Composition API

반응성

setup 함수를 이용하여 데이터를 전달하는 상황일때 만일 반응성을 이용하지 않는다면?
어떠한 값의 변경이 일어났을 때 해당 데이터를 사용하고 있는 기능, 화면에서 변화를 감지하지 않기에 상태를 유지할 수가 없게 된다.

---

toRefs()

만약에 state를 반복해서 사용하는 상황일 경우?
애초에 보낼 때 반응성을 가진 데이터를 속성값을 써서 보내면 된다고 생각할 수 있다.
하지만 return에 속성 값을 직접 입력하게 된다면 반응성을 잃게 된다.
이런 상황에선 toRefs를 이용할 수 있다.

<template>
    <p>{{ username.name }}</p>
</template>

<script>
import { reactive } from "@vue/reactivity";
export default {
    setup() {
        const username = reactive({
            name: "ninja",
            age: 3,
        });
        return { username };
    },
};
</script>

• username.name을 여러개 사용해야 한다면?

<template>
    <p>{{ username }}</p>
</template>

<script>
import { reactive } from "@vue/reactivity";
export default {
    setup() {
        const username = reactive({
            name: "ninja",
            age: 3,
        });
        return { username.name };
    },
};
</script>

• username.name을 직접 return 시키면 되지 않나?
  정답은 No! 직접 속성값을 전달하게 되면 반응성을 잃게 된다.
  (상태 변화에 대한 감지가 불가능하게 된다는 말)

<template>
    <p>{{ name }}</p>
    <p>{{ age }}</p>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
export default {
    props: ["post"],
    setup() {
        const username = reactive({
            name: "ninja",
            age: 3,
        });
        return toRefs(username);
    },
};
</script>

---

ref

데이터의 형태를 object가 아닌 단일 값으로 보내고 싶을 때

<template>
        <p>{{ isNotUgly }}</p>
</template>

<script>
import { ref } from "@vue/reactivity";
export default {
    setup() {
        const isHandsome = false;
        const isNotUgly = isHandsome;
        isHandsome = true;
        return { isNotUgly };
    },
};
</script>

일반적인 javascript 형태일 경우의 형태로 입력을 했을 때 isHansome의 값이 바뀌어도 isNotUgly값은 바뀌지 않는다.
vue에서는 isNotUgly값 또한 변화를 기대하기에 반응성을 주입을 시켜줘야한다.

<template>
        <p>{{ isNotUgly }}</p>
</template>

<script>
import { ref } from "@vue/reactivity";
export default {
    setup() {
        const isHandsome = ref(false);
        const isNotUgly = isHandsome;
        isHandsome.value = true;
        return { isNotUgly };
    },
};
</script>

단일의 값인 경우는 ref를 이용할 수 있다.
더 다양한 데이터는 reative를 사용해서 보낼 수 있다.

---

reactive({})

<template>
        <p>{{ isHandsome }}</p>
        <p>{{ username.name }}</p>
</template>

<script>
import { reactive, ref, toRefs } from "@vue/reactivity";
export default {
    setup() {
        const isHandsome = ref(false);
        const username = reactive({
            name: "ninja",
            age: 3,
        });
        return { isHandsome, username };
    },
};
</script>

toRefs()

object형태로 값을 보내기때문에 스프레드 연산자를 이용해서 전달해야한다.

<template>
        <p>{{ name }}</p>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
export default {
    setup() {
        const username = reactive({
            name: "ninja",
            age: 3,
        });
        return { ...toRefs(username) };
    },
};
</script>

---

<template>

    <div>{{ username }}</div>
    <input type="text" v-model="username" />
    <button @click="changeName">이름 변경</button>

    <div>제품명: {{ name }}, 가격: {{ price }}</div>
    <button @click="changeProduct">제품 변경</button>
    
</template>

<script>
import { reactive, ref, toRefs } from "@vue/reactivity";
export default {
    setup() {
        const username = ref("scalp");
        function changeName() {
            username.value = "messi";
        }

        const productList = reactive({
            name: "tv",
            price: 1000,
        });
        function changeProduct() {
            (productList.name = "세탁기"), (productList.price = 5000);
        }

        return {
            username,
            changeName,
            ...toRefs(productList),
            changeProduct,
        };
    },
};
</script>