[Vue.js] 반응성(reactivity)를 가진 상태 데이터 만들기

📌1. Compositoin API에서 ref, reactive를 사용하는 이유?

Vue.js Composition API에서는 Options API와 달리 반응 상태 데이터를 수동으로 생성해야 합니다. 

Options API에서는 data옵션에 선언된 데이터들을 Vue가 자동으로 반응형으로 만들어줍니다. 자동으로 반응성이 주입되기때문에 프로세스가 단순해 진다는 장점이 있지만, 복잡한 구성요소 논리를 처리할때는 제한이 생길 수도 있습니다.

Composition API는 이러한 단점을 극복하고 효과적으로 상태를 관리하기위해 반응성을 명시하도록 바뀌었는데요. ref 또는 reactive를 사용하여 상태 데이터를 명시적으로 선택할 수 있게되었습니다. 반응성을 직접관리해야해서 사전 작업이 조금 더 필요할 수 있지만 궁극적으로는 컴포넌트의 로직과 상태 관리를 보다 유연하고 세밀하게 제어할 수 있어, 컴포넌트 내부의 복잡성을 보다 잘 구성하고 통제할 수 있습니다.

(예시는 script setup을 기반으로 작성되었습니다😉)

 

📌2. ref

• ref는 개별 값을 반응형으로 만드는 데 사용됩니다.
  주로 기본 값(문자열, 숫자, 불린, 등)을 래핑하지만 객체 및 배열의 변경 사항을 추적하는 데도 사용할 수 있습니다.
• <template>에서 개별 값은 바로 사용이 가능합니다.   ex) count
• <script setup> 내부에서 데이터를 이용할 때는 반드시 '.value'속성을 사용해야 합니다.

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);
const increment = () => { count.value++; };
</script>

 

📌3. reactive 

• reactive는 객체나 배열을 반응형으로 만드는 데 사용됩니다.
  객체나 배열의 중첩된 모든 속성들을 반응형으로 만들 수 있기때문에 객체나 배열 내의 속성을 변경하면 해당 속성이 참조되는 DOM이 자동으로 업데이트됩니다.  
• <template>에서 객체안의 요소에 바로 접근이 가능합니다. 
• <script setup> 내부에서 데이터를 이용할 때도 객체에 직접 작업이 가능합니다. 

<template>
  <div>
    <p>Count: {{ state.count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { reactive } from 'vue';

const state = reactive({
  count: 0,
});

const increment = () => {
  state.count++;
};
</script>

 

💡 ref를 메서드에서 사용하려면 .value를 사용하여 해당 값에 접근해야하지만, reactive를 사용하면 객체 및 배열과 직접 상호 작용할 수 있습니다. 보통 'ref'는 기본 값을 사용하는 간단한 상태 관리에 더 적합하고, 'reactive'는 중첩된 속성 및 객체가 있는 복잡한 상태를 관리하는 데 더 적합합니다. 결론적으로 상태 데이터의 구조에 따라 ref와 reactive를 선택하여 사용합니다. (하지만 고르기 어려우면 귀찮으니까 ㅎㅎ ref를 사용해도 문제되지 않습니다😙)