Vue.js 반응형 data 이해하기 | 반응형 data에 instance를 담지 말자

고광필·2023년 1월 12일

vue

Front

목록 보기

29/33

현재 회사에서 vue.js를 사용하고 있습니다
그러나 아직도 vue를 미숙하게 다뤄서 생기는 문제들이 있어서 개념을 다시 공부하고 있습니다

이 글은 vue.js의 data 중 제가 미숙하게 이해한 부분이 있어서
미숙했던 개념과 문제를 겪었던 경험을 정리합니다

vue를 공부하려고 왔다면 공식문서를 추천드립니다

data

어떤 데이터가 있고, 이 데이터를 기반으로 화면을 렌더링합니다
이 때 이런 데이터를 상태라고 합니다

상태가 변경되면, 화면도 함께 변경됩니다

React에서는 state이고, vue에서는 data입니다

vue api에는 접두사로 $가 붙는데, this.$ data는 data와 같습니다

반응형 data

<script>
export default {
  data() {
    return {
      // 반응형이 주입된 데이터는 이곳에
      count: 1,
    };
  },

  created() {
    console.log(this.count); // 1
    console.log(this.$data); // { a: 1}

    this.value = 10; // 반응형이 아닌 data
  },
};
</script>

data()가 반환하는 객체에 포함된 변수는 반응형이 주입된 data가 됩니다
이 data는 변경되면 화면을 다시 렌더링합니다

일부 data는 변경되더라도 렌더링 하지 않기를 원할수도 있습니다
그럴 땐 data()가 반환하는 객체에 포함을 안시키면 됩니다

vue는 this binding을 사용하므로 this에 새로운 내용을 추가하면 반응형이 아닌 data로 사용할 수 있습니다

this 바인딩을 사용하기 때문에 data()는 화살표 함수로 작성하면 안됩니다

반응형 data는 조심히 다루자

당연하지만 반응형 data는 렌더링에 영향이 가니 필요할때만 변경되어야 합니다

그리고 제가 오늘 놓친 부분인데 vue 공식문서 중 proxy를 사용하니 조심하라는 내용이 있었습니다

export default {
  data() {
    return {
      someObject: {}
    }
  },
  mounted() {
    const newObject = {}
    this.someObject = newObject

    console.log(newObject === this.someObject) // false
  }
}

proxy는 객체를 재정의할 수 있는 기능입니다

내부적으로 반응형 data는 proxy를 사용하기 때문에 반응형 data에 저장된 값은 제가 생각한 값과 동일하지 않을 수 있습니다

vue instance를 담지 말자

제가 겪었던 대표적인 상황을 한가지 적겠습니다

<template>
  <DxTreeView :onInitialized="onInitialized" />
</template>

<script>
export default {
  components: {
    DxTreeView,
  },

  data() {
    return {
      treeView: null,
    };
  },

  methods: {
    onInitialized(e) {
      this.treeView = e.component;
    },
  },
};
</script>