Vue.js - 속성들이 반응형으로 렌더링이 안된다면?

들어가며

https://kr.vuejs.org/v2/guide/instance.html#%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4-%ED%9B%85 참고하여 작성

토이 프로젝트 기능 중, 드래그가 가능한 트리뷰를 구현하고 있었다. 자식이 있는 노드인 경우 Array 타입의 children 속성이 필요하다. 내부 로직적으로는 자식이 없어도 children 속성을 가지고 있어야했다.

부모 컴포넌트에서 props로 데이터를 전달할 때, children이 없는 노드는 내부적으로 속성을 생성해줘야 했다. 디버깅으로 데이터 흐름을 보면 정상적으로 흘러가나, 렌더링이 반응하지 않았다.

Vue.js 공식 문서에 설명이 잘 되어있는 부분이였지만, 개발하면서 이론을 파악하는 공부방식의 문제가 들어나는 부분이였다고 생각된다.

속성의 성질

각 Vue 인스턴스는 data 객체에 있는 모든 속성을 프록시 처리 합니다.

데이터가 변경되면 화면은 다시 렌더링됩니다. 유념할 점은, data에 있는 속성들은 인스턴스가 생성될 때 존재한 것들만 반응형이라는 것입니다. 즉, 다음과 같이 새 속성을 추가하면:

vm.b = 'hi'

b가 변경되어도 화면이 갱신되지 않습니다. 어떤 속성이 나중에 필요하다는 것을 알고 있으며, 빈 값이거나 존재하지 않은 상태로 시작한다면 초기값을 지정할 필요가 있습니다.

위 내용에서 초기값 지정을 보장할 수 없어 내부적으로 속성의 초기값을 지정하려고 했다.

아래 내용을 이해하고 적용시켜 이 문제를 해결했다.

Vue는 이미 만들어진 인스턴스에 새로운 루트 수준의 반응 속성을 동적으로 추가하는 것을 허용하지 않습니다. 그러나 Vue.set(object, key, value) 메소드를 사용하여 중첩 된 객체에 반응성 속성을 추가 할 수 있습니다.

JavaScript의 제한으로 인해 Vue는 배열에 대해 다음과 같은 변경 사항을 감지할 수 없습니다.

모던 JavaScript의 한계로 Vue는 속성 추가 및 삭제를 감지하지 못합니다.

Vue.set(vm.someObject, 'b', 2)

this.$set(this.someObject, 'b', 2)