[Vue.js] 반응성(Reactivity) 시스템

1. Vue의 반응성 시스템이란?

간단하게 말씀드리자면, 데이터 상태가 변하면 자동으로 사용자 인터페이스(UI)에 반영되도록 하는 시스템을 말합니다.

 

Vue의 반응성 시스템은 옵저버 패턴(Observer Pattern)에 기반을 두고 있습니다.

옵저버 패턴이란 ?

디자인 패턴(Design Pattern)중 하나로, 객체 간 1 대 N 관계를 정의하여, 한 객체의 상태가 변경되었을 때
의존성을 가진 다른 객체들에게 자동으로 알림을 전달하는 구조입니다.

 

즉, 객체의 상태가 변경이 되면 의존성을 가진 다른 객체들의 상태도 같이 변경을 시킬 수 있다는 뜻입니다.

 

Vue는 데이터를 추적하고 데이터 변경 사항이 감지되면 이를 렌더링 시스템(Renderer)에 전달해 UI를 자동으로 업데이트를 하게 되는데, 이 과정은 크게 두 단계로 이루어집니다:

 

• 데이터 추적
  • Vue는 데이터의 상태를 추적하여, 변경 사항을 감지하고, 이를 통해 데이터와 UI 사이의 관계를 유지합니다.
• UI 업데이트
  • 데이터가 변경되면, Vue는 변경된 데이터와 연결된 UI를 다시 렌더링하여 사용자에게 최신 상태를 보여줍니다.

 

2. Vue 3에서 반응성을 구현하는 방법

Vue 3에서는 Composition API를 도입하여 더욱 세밀하고 유연하게 반응성을 구현할 수 있습니다.

주요 기능인 ref와 reactive를 중심으로 보도록 하겠습니다.

 

2-1. ref

ref는 기본 데이터 타입(숫자, 문자열 등)을 반응형 데이터로 만들 때 사용됩니다.

<template>
  <p>Count: {{ count }}</p>
  <button @click="increment">Increment</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)

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

 

우선 ref로 생성한 값은 .value로 접근해야 합니다.

객체에도 ref를 사용할 수 있지만, 객체 전체를 교체할 일이 없다면 reactive를 사용하는게 더 적합합니다.

 

2-2. reactive

reactive는 객체(Object)와 배열(Array)를 반응형으로 만들 때 사용됩니다.

<template>
  <div>
    <p>Name: {{ user.name }}</p>
    <p>Age: {{ user.age }}</p>
    <button @click="updateName('Jane Doe')">Change Name</button>
  </div>
</template>
<script setup>
import { reactive } from 'vue'
const user = reactive({
  name: 'John Doe',
  age: 30,
})

const updateName = (newName) => {
  user.name = newName
}
</script>

 

reactive를 사용하게 되면 객체 내부의 모든 속성이 반응형으로 설정되며, 기존 속성을 업데이트하면 Vue가 이를 감지해

UI를 업데이트를 합니다.

 

위의 ref에서 언급했듯이, 객체 전체를 교체할 일이 없다면 reactive를 사용하는게 더 적합하긴 하지만,

객체에도 ref를 사용하는 예시를 보여드리면 다음과 같습니다.

 

<template>
  <div>
    <p>Name: {{ user.name }}</p>
    <p>Age: {{ user.age }}</p>
    <button @click="updateName('Jane Doe')">Change Name</button>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const user = ref({})
user.value = {
  name: 'John Doe',
  age: 30,
}

const updateName = (newName) => {
  user.value.name = newName
}
</script>

 

ref를 사용하게되면 .value로 접근해야하는데 객체도 마찬가지입니다.

위와 같이 ref로 선언한 객체는 user.value로 접근하며, name속성을 가르킬 때는 user.value.name으로 들어가야합니다.