• vue에서 반응성에서 어떠한 데이터에 변경이 일어났을 때 데이터를 사용하고 있거나 참조하고 있는 기능, 화면들에서 변화가 감지되지 않아서 상태를 동일하게 유지할 수 없다

<template>
  <h2>{{ name }}</h2>
</template>

<script>
export default {
  name: 'TestComponent',
  setup() {
    const name = 'rachaen';
    return {
      name,
    };
  },
};
</script>

<style></style>

• setup 함수를 이용해서 데이터를 보낼 때는 반응성을 주입해주어야 한다.
  - reactive를 이용해보자!

reactive

• 반응성을 가진 데이터로 변신을 시켜준다.

<template>
  <div>
    <h2>{{ state.name }}</h2>
    <h2>{{ state.age }}</h2>
  </div>
</template>

<script>
import { reactive } from 'vue';
export default {
  name: 'TestComponent',
  setup() {
    const state = reactive({
      name: 'rachaen',
      age: 26,
    });
    return {
      state,
    };
  },
};
</script>

• 애초에 보낼 때 반응성을 가진 데이터를 직접 보내면 되지 않을까?

<template>
  <div>
    <h2>{{ name }}</h2>
    <h2>{{ age }}</h2>
  </div>
</template>

<script>
import { reactive } from 'vue';
export default {
  name: 'TestComponent',
  setup() {
    const state = reactive({
      name: 'rachaen',
      age: 26,
    });
    return {
      name: state.name,
      age: state.age,
    };
  },
};
</script>

• 안에 있는 property들을 직접적으로 연결하게 되면 반응성을 잃게 된다....
• 반응성을 유지시켜주기 위해서 toRefs 메서드를 사용할 필요가 있다

<template>
  <div>
    <h2>{{ name }}</h2>
    <h2>{{ age }}</h2>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue';
export default {
  name: 'TestComponent',
  setup() {
    const state = reactive({
      name: 'rachaen',
      age: 26,
    });
    return toRefs(state);
  },
};
</script>

Reactive Variable with ref

• reference의 형태로 pass된 data
  - 값 변경이 일어날 때 함께 같은 상태를 유지하게 된다. (반응성이 유지가 된다)
• value의 형태로 pass
  - 반응성이 유지가 되지 않는다.
  

ref

• 반응성 적용 전
  

<template>
  <div>
    <h2>{{ isAwesome }}</h2>
    <h2>{{ isNotAwful }}</h2>
  </div>
</template>

<script>
export default {
  name: 'TestComponent',
  setup() {
    let isAwesome = false;
    let isNotAwful = isAwesome;
    isAwesome = true;
    return {
      isAwesome,
      isNotAwful,
    };
  },
};
</script>

• ref를 사용하여 반응성 적용 후
  - data의 형태를 단일값으로 보낼 때 ref

<template>
  <div>
    <h2>{{ isAwesome }}</h2>
    <h2>{{ isNotAwful }}</h2>
  </div>
</template>

<script>
import { ref } from 'vue';
export default {
  name: 'TestComponent',
  setup() {
    let isAwesome = ref(false);
    let isNotAwful = isAwesome;
    console.log(isNotAwful);
    return {
      isAwesome,
      isNotAwful,
    };
  },
};

• ref로 감싼 데이터를 접근하기 위해서는 .value로 접근해야 한다!!

  <div>
    <h2>{{ isAwesome }}</h2>
    <h2>{{ isNotAwful }}</h2>
  </div>
</template>

<script>
import { ref } from 'vue';
export default {
  name: 'TestComponent',
  setup() {
    let isAwesome = ref(false);
    let isNotAwful = isAwesome;
    isAwesome.value = true;
    return {
      isAwesome,
      isNotAwful,
    };
  },
};
</script>

• ref로 선언한 변경이 일어나면 ref data를 사용한 값도 변경이 된다.

ref, reactive, toRefs

<template>
  <div>
    <h2>{{ isAwesome }}</h2>
    <h2>{{ name }}</h2>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from 'vue';
export default {
  name: 'TestComponent',
  setup() {
    let isAwesome = ref(true);
    const state = reactive({
      name: 'rachaen',
      age: 26,
    });

    return {
      isAwesome,
      ...toRefs(state),	// toRefs만 하면 정상적으로 가지지 않음. object형태이기 때문에 spread operator(...)을 사용해서 보내야 한다.
    };
  },
};
</script>

• 단일한 데이터는 ref로 선언을 해서 보낼 수 있다.
• 다양한 데이터는 reactive로 선언해서 보낼 수 있다.
• 각각의 데이터를 ref로 변경시켜주는 toRefs를 사용할 수 있다.

methods

<template>
  <div>
    <h2>{{ name }}</h2>
    <button @click="changeName">ChangeName</button>
    <h2>메뉴명: {{ menu }}, 가격: {{ price }}</h2>
    <button @click="changeMenu">changeMenu</button>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from 'vue';
export default {
  name: 'TestComponent',
  setup() {
    const name = ref('rachaen');

    function changeName() {
      name.value = 'geon';
    }
    const state = reactive({
      menu: '피자',
      price: 100,
    });

    function changeMenu() {
      state.menu = '돈까스';
      state.price = '500';
    }
    return {
      name,
      changeName,
      changeMenu,
      ...toRefs(state),
    };
  },
};

v-model

• 반응성 주입 전
  

<template>
  <div>
    <h2>{{ name }}</h2>
    <button @click="changeName">ChangeName</button>

    <div>
      <input type="text" v-model="name" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TestComponent',
  setup() {
    const name = 'rachaen';

    function changeName() {
      name.value = 'geon';
    }

    return {
      name,
      changeName,
    };
  },
};
</script>

• 반응성 주입 후
  

<template>
  <div>
    <h2>{{ name }}</h2>
    <button @click="changeName">ChangeName</button>

    <div>
      <input type="text" v-model="name" />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
export default {
  name: 'TestComponent',
  setup() {
    const name = ref('rachaen');

    function changeName() {
      name.value = 'geon';
    }

    return {
      name,
      changeName,
    };
  },
};
</script>

---

VUE3 composition API 간략하게 알아보기 (ref, reactive, methods, v-model )