[Vue.js] Vue.set

Vue.set() 제대로 이해하기 - 왜, 언제 사용해야 할까?

Vue.js를 사용하다 보면 데이터를 갱신할 때 그냥 객체에 값을 할당했는데 화면에 반영이 안 되는 경우가 있습니다. 이럴 때 해결 방법으로 자주 등장하는 것이 바로 Vue.set() 입니다.

이번 글에서는 Vue.set()이 무엇이고, 왜 필요한지, 그리고 어떻게 사용하는지 쉽게 정리해보겠습니다.

Vue.set()이란?

Vue.set()은 Vue의 반응성 시스템(Reactivity System)과 관련된 메서드입니다. Vue는 객체를 생성할 때 내부적으로 데이터에 반응성을 설정하지만, 이후에 새로운 속성을 추가하면 이 변화를 감지하지 못합니다.

이 문제를 해결하기 위해 사용하는 것이 Vue.set()입니다. 기존 객체에 새로운 속성을 추가하거나 배열을 변경할 때, Vue가 그 변화를 인식할 수 있도록 강제로 반응성을 추가해주는 역할을 합니다.

왜 Vue.set()이 필요한가?

Vue는 컴포넌트가 생성될 때 미리 정의된 데이터 속성에 대해서만 반응성을 설정합니다. 따라서 다음과 같이 새로운 속성을 직접 추가하면 화면에 반영되지 않습니다.

this.user.name = 'John'; // ✅ 이미 있던 속성은 잘 반영됨
this.user.age = 30; // ❌ 새로 추가한 속성은 반응성이 없음

이럴 때 Vue.set()을 사용해야 합니다.

Vue.set(this.user, 'age', 30);

이렇게 하면 'age'라는 새로운 속성도 반응성을 가지게 되어 화면에 정상적으로 반영됩니다.

사용 방법

Vue.set()은 세 개의 인자를 받습니다.

• 첫 번째 인자: 대상 객체 또는 배열
• 두 번째 인자: 새로 추가할 속성명(또는 배열 인덱스)
• 세 번째 인자: 새로 설정할 값

예시:

// 객체에 새로운 속성 추가
Vue.set(this.user, 'email', 'test@example.com');

// 배열 요소 변경
Vue.set(this.items, 2, '새로운 아이템');

주의할 점

Vue 2에서는 반드시 Vue.set()을 사용해야 새로운 속성에 반응성을 부여할 수 있습니다. 하지만 Vue 3부터는 Proxy 기반 반응성 시스템이 도입되어, 굳이 Vue.set()을 사용할 필요가 줄어들었습니다. (Vue 3에서는 그냥 객체에 새로운 속성을 추가해도 반응성이 유지됩니다.)

정리

Vue.set()은 Vue 2.x 버전에서 반응성을 보장하기 위해 꼭 필요한 메서드입니다. 객체나 배열에 새 속성을 추가할 때 화면이 갱신되지 않는다면, Vue.set()을 사용해서 문제를 해결할 수 있습니다.

특히 Vue 2를 사용하는 프로젝트에서는 새로운 데이터를 추가하거나 수정할 때 항상 '반응성이 유지되는지'를 의식하면서 개발하는 것이 중요합니다.

Vue.set(), 꼭 기억해두세요!